1# 使用Web组件的PDF文档预览能力
2
3Web组件提供了在网页中预览PDF的能力。应用可以通过Web组件的[src](../reference/apis-arkweb/ts-basic-components-web.md#web)参数和[loadUrl()](../reference/apis-arkweb/js-apis-webview.md#loadurl)接口中传入PDF文件，来加载PDF文档。根据PDF文档来源不同，可以分为三种常用场景：加载网络PDF文档、加载本地PDF文档、加载应用内resource资源PDF文档。
4
5PDF文档预览加载过程中，若涉及网络文档获取，请在module.json5中配置网络访问权限，添加方法请参考[在配置文件中声明权限](../security/AccessToken/declare-permissions.md)。
6
7  ```
8  "requestPermissions":[
9      {
10        "name" : "ohos.permission.INTERNET"
11      }
12    ]
13  ```
14
15
16在下面的示例中，Web组件创建时指定默认加载的网络PDF文档 `www.example.com/test.pdf`，该地址为示例，使用时需替换为真实可访问地址:
17
18```ts
19// xxx.ets
20import { webview } from '@kit.ArkWeb';
21
22@Entry
23@Component
24struct WebComponent {
25  controller: webview.WebviewController = new webview.WebviewController();
26
27  build() {
28    Column() {
29      Web({
30      	src:
31      	"https://www.example.com/test.pdf", 					// 方式一 加载网络PDF文档
32      	// getContext(this).filesDir + "/test.pdf", // 方式二 加载本地应用沙箱内PDF文档
33      	// "resource://rawfile/test.pdf", 						// 方式三 应用内resource资源PDF文档
34      	// $rawfile('test.pdf'), 								// 方式四 应用内resource资源PDF文档
35      	controller: this.controller
36      })
37        .domStorageAccess(true)
38    }
39  }
40}
41```
42
43上述示例中，由于PDF预览页面对于侧边导航栏是否展开会根据用户操作使用`window.localStorage`进行持久化记录，所以需开启文档对象模型存储[domStorageAccess](../reference/apis-arkweb/ts-basic-components-web.md#domstorageaccess)权限:
44
45  ```
46  Web().domStorageAccess(true)
47  ```
48
49在Web组件创建时，指定默认加载的PDF文档。在默认PDF文档加载完成后，如果需要变更此Web组件显示的PDF文档，可以通过调用[loadUrl()](../reference/apis-arkweb/js-apis-webview.md#loadurl)接口加载指定的PDF文档。[Web组件](../reference/apis-arkweb/ts-basic-components-web.md#web)的第一个参数变量src不能通过状态变量（例如：@State）动态更改地址，如需更改，请通过[loadUrl()](../reference/apis-arkweb/js-apis-webview.md#loadurl)重新加载。
50
51同时包含三种PDF文档加载预览场景:
52- 预览加载网络PDF文件。
53
54  ```ts
55  Web({
56    src: "https://www.example.com/test.pdf",
57    controller: this.controller
58  })
59    .domStorageAccess(true)
60  ```
61- 预览加载应用沙箱内PDF文件，需要开启应用中文件系统的访问[fileAccess](../reference/apis-arkweb/ts-basic-components-web.md#fileaccess)权限。
62
63  ```ts
64  Web({
65    src: getContext(this).filesDir + "/test.pdf",
66    controller: this.controller
67  })
68    .domStorageAccess(true)
69    .fileAccess(true)
70  ```
71- 预览加载应用内PDF资源文件，有两种使用形式。`$rawfile('test.pdf')`形式无法指定下面介绍的预览参数。
72
73  ```ts
74  Web({
75    src: "resource://rawfile/test.pdf", // 或 $rawfile('test.pdf')
76    controller: this.controller
77  })
78    .domStorageAccess(true)
79  ```
80
81此外，通过配置PDF文件预览参数，可以控制打开预览时页面状态。
82
83当前支持如下参数:
84
85| 语法		| 描述 |
86| --------- | ---------- |
87| nameddest=destination 	|  指定PDF文档中的命名目标。 |
88| page=pagenum 	| 使用整数指定文档中的页码，文档第一页的pagenum值为1。|
89| zoom=scale    zoom=scale,left,top	| 使用浮点或整数值设置缩放和滚动系数。 例如：缩放值100表示缩放值为100%。 向左和向上滚动值位于坐标系中，0,0 表示可见页面的左上角，无论文档如何旋转。 |
90| toolbar=1 \| 0 	| 打开或关闭顶部工具栏。 |
91| navpanes=1 \| 0 	| 打开或关闭侧边导航窗格。 |
92
93
94URL示例:
95```
96https://example.com/test.pdf#Chapter6
97https://example.com/test.pdf#page=3
98https://example.com/test.pdf#zoom=50
99https://example.com/test.pdf#page=3&zoom=200,250,100
100https://example.com/test.pdf#toolbar=0
101https://example.com/test.pdf#navpanes=0
102```
103<!--RP1--><!--RP1End-->