1# 使用Web组件的PDF文档预览能力 2<!--Kit: ArkWeb--> 3<!--Subsystem: Web--> 4<!--Owner: @Yuan_ss--> 5<!--Designer: @qiu-gongkai--> 6<!--Tester: @ghiker--> 7<!--Adviser: @HelloCrease--> 8 9Web组件支持在网页中预览PDF。应用通过Web组件的[src](../reference/apis-arkweb/arkts-basic-components-web-i.md#weboptions)参数和[loadUrl()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#loadurl)接口加载PDF文档。具体场景包括：网络PDF文档、应用沙箱内PDF文档和本地PDF文档。 10 11若涉及网络文档获取，需在module.json5中配置网络访问权限。添加方法请参考[在配置文件中声明权限](../security/AccessToken/declare-permissions.md#在配置文件中声明权限)。 12 13 ``` 14 "requestPermissions":[ 15 { 16 "name" : "ohos.permission.INTERNET" 17 } 18 ] 19 ``` 20 21## 通过不同的方式加载PDF文档 22 23在下面的示例中，Web组件创建时指定默认加载的网络PDF文档`https://www.example.com/test.pdf`。使用时需替换为真实可访问地址。 24 25```ts 26// xxx.ets 27import { webview } from '@kit.ArkWeb'; 28 29@Entry 30@Component 31struct WebComponent { 32 controller: webview.WebviewController = new webview.WebviewController(); 33 34 build() { 35 Column() { 36 Web({ 37 src: 38 "https://www.example.com/test.pdf", // 方式一 加载网络PDF文档 39 // this.getUIContext().getHostContext()!.filesDir + "/test.pdf", // 方式二 加载本地应用沙箱内PDF文档 40 // "resource://rawfile/test.pdf", // 方式三 本地PDF文档 (格式一) 41 // $rawfile('test.pdf'), // 方式三 本地PDF文档 (格式二) 42 controller: this.controller 43 }) 44 .domStorageAccess(true) 45 } 46 } 47} 48``` 49 50PDF预览页面会根据用户操作使用`window.localStorage`记录侧导航栏的展开状态，因此需要开启文档对象模型存储[domStorageAccess](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#domstorageaccess)权限: 51 52 ``` 53 Web().domStorageAccess(true) 54 ``` 55 56在创建Web组件时，指定默认加载的PDF文档。默认PDF文档加载完成后，若需变更Web组件显示的PDF文档，通过调用[loadUrl()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#loadurl)接口加载指定的PDF文档。[Web组件](../reference/apis-arkweb/arkts-basic-components-web.md)的第一个参数变量src不能通过状态变量（例如：@State）动态更改地址，如需更改，请通过[loadUrl()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#loadurl)重新加载。 57 58包含三种PDF文档加载预览场景： 59- 预览加载网络PDF文档。 60 61 ```ts 62 Web({ 63 src: "https://www.example.com/test.pdf", 64 controller: this.controller 65 }) 66 .domStorageAccess(true) 67 ``` 68- 预览加载应用沙箱内PDF文档需要开启文件系统的[fileAccess](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#fileaccess)权限。 69 70 ```ts 71 Web({ 72 src: this.getUIContext().getHostContext()!.filesDir + "/test.pdf", 73 controller: this.controller 74 }) 75 .domStorageAccess(true) 76 .fileAccess(true) 77 ``` 78- 预览加载本地PDF文档。 79 80 ```ts 81 Web({ 82 src: "resource://rawfile/test.pdf", // 格式一 加载本地PDF文档 83 // src: $rawfile('test.pdf'), // 格式二 加载本地PDF文档 84 controller: this.controller 85 }) 86 .domStorageAccess(true) 87 ``` 88 89## 通过配置PDF文件预览参数，控制打开预览时页面状态 90 91当前支持如下参数: 92 93| 语法 | 描述 | 94| --------- | ---------- | 95| nameddest=destination | 指定PDF文档中的命名目标。 | 96| page=pagenum | 使用整数指定文档中的页码，文档第一页的pagenum值为1。| 97| zoom=scale zoom=scale,left,top | 使用浮点或整数值设置缩放和滚动系数。例如：缩放值100表示缩放值为100%。 向左和向上滚动值位于坐标系中，0,0 表示可见页面的左上角，无论文档如何旋转。 | 98| toolbar=1 \| 0 | 打开或关闭顶部工具栏。 | 99| navpanes=1 \| 0 | 打开或关闭侧边导航窗格。 | 100| pdfbackgroundcolor=color | 指定PDF文档背景色，color为标准的六位十六进制RGB（取值范围为000000~ffffff，例如白色为：ffffff）。 | 101 102 103URL示例: 104``` 105https://example.com/test.pdf#nameddest=Chapter6 106https://example.com/test.pdf#page=3 107https://example.com/test.pdf#zoom=50 108https://example.com/test.pdf#page=3&zoom=200,250,100 109https://example.com/test.pdf#toolbar=0 110https://example.com/test.pdf#navpanes=0 111https://example.com/test.pdf#pdfbackgroundcolor=ffffff 112``` 113 114## PDF文档预览回调功能 115 116从API version 20开始，PDF文档预览支持两种回调功能：加载成功/失败回调和滚动预览到底回调。 117 118在下面的示例中，Web组件创建时指定默认加载的网络PDF文档`https://www.example.com/test.pdf`。使用时需替换为真实可访问地址。 119 120- 加载成功/失败回调。 121 ```ts 122 Web({ 123 src: 'https://www.example.com/test.pdf', 124 controller: this.controller 125 }) 126 .onPdfLoadEvent( 127 (eventInfo: OnPdfLoadEvent) => { 128 console.info(`Load event callback called. url: ${eventInfo.url}, result: ${eventInfo.result}.`) 129 } 130 ) 131 ``` 132 133- 滚动预览到底回调。 134 ```ts 135 Web({ 136 src: 'https://www.example.com/test.pdf', 137 controller: this.controller 138 }) 139 .onPdfScrollAtBottom( 140 (eventInfo: OnPdfScrollEvent) => { 141 console.info(`Scroll at bottom callback called. url: ${eventInfo.url}.`) 142 } 143 ) 144 ``` 145 146<!--RP1--><!--RP1End-->