IT评测·应用市场-qidao123.com

标题: 鸿蒙NEXT版实战开发：使用Web组件的PDF文档预览 [打印本页]

---

作者: 瑞星    时间: 2025-2-22 11:33
标题: 鸿蒙NEXT版实战开发：使用Web组件的PDF文档预览
往期鸿蒙全套实战出色文章必看内容：

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
  
• 鸿蒙HarmonyOS NEXT开发技术最全学习门路指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
  

---

使用Web组件的PDF文档预览

Web组件提供了在网页中预览PDF的能力。应用可以通过Web组件的src参数和loadUrl()接口中传入PDF文件，来加载PDF文档。根据PDF文档来源差异，可以分为三种常用场景：加载网络PDF文档、加载本地PDF文档、加载应用内resource资源PDF文档。
PDF文档预览加载过程中，若涉及网络文档获取，必要设置ohos.permission.INTERNET网络访问权限。
在下面的示例中，Web组件创建时指定默认加载的网络PDF文档 www.example.com/test.pdf，该地点为示例，使用时需替换为真实可访问地点:

1. // xxx.ets
2. import { webview } from '@kit.ArkWeb';
4. @Entry
5. @Component
6. struct WebComponent {
7.   controller: webview.WebviewController = new webview.WebviewController();
9.   build() {
10.     Column() {
11.       Web({
12.           src:
13.           "https://www.example.com/test.pdf",                     // 方式一 加载网络PDF文档
14.           // getContext(this).filesDir + "/test.pdf", // 方式二 加载本地应用沙箱内PDF文档
15.           // "resource://rawfile/test.pdf",                         // 方式三 应用内resource资源PDF文档
16.           // $rawfile('test.pdf'),                                 // 方式四 应用内resource资源PDF文档
17.           controller: this.controller
18.       })
19.         .domStorageAccess(true)
20.     }
21.   }
22. }

复制代码

上述示例中，由于PDF预览页面临于侧边导航栏是否展开会根据用户操作使用window.localStorage举行持久化记载，以是需开启文档对象模型存储domStorageAccess权限:

1. Web().domStorageAccess(true)

复制代码

在Web组件创建时，指定默认加载的PDF文档。在默认PDF文档加载完成后，如果必要变更此Web组件显示的PDF文档，可以通过调用loadUrl()接口加载指定的PDF文档。Web组件的第一个参数变量src不能通过状态变量（比方：@State）动态更改地点，如需更改，请通过loadUrl()重新加载。
同时包含三种PDF文档加载预览场景:

• 预览加载网络PDF文件
  
  1. Web({
  2.   src: "https://www.example.com/test.pdf",
  3.   controller: this.controller
  4. })
  5.   .domStorageAccess(true)

  复制代码
• 预览加载应用沙箱内PDF文件，必要开启应用中文件体系的访问fileAccess权限。
  
  1. Web({
  2.   src: getContext(this).filesDir + "/test.pdf",
  3.   controller: this.controller
  4. })
  5.   .domStorageAccess(true)
  6.   .fileAccess(true)

  复制代码
• 预览加载应用内PDF资源文件，有两种使用形式。$rawfile('test.pdf')形式无法指定下面先容的预览参数。
  
  1. Web({
  2.   src: "resource://rawfile/test.pdf", // 或 $rawfile('test.pdf')
  3.   controller: this.controller
  4. })
  5.   .domStorageAccess(true)

  复制代码

别的，通过设置PDF文件预览参数，可以控制打开预览时页面状态。
当前支持如下参数:
语法描述nameddest=destination指定PDF文档中的命名目的。page=pagenum使用整数指定文档中的页码，文档第一页的pagenum值为1。zoom=scale zoom=scale,left,top使用浮点或整数值设置缩放和滚动系数。 比方：缩放值100表示缩放值为100%。 向左和向上滚动值位于坐标系中，0,0 表示可见页面的左上角，无论文档如何旋转。toolbar=1 | 0打开或关闭顶部工具栏。navpanes=1 | 0打开或关闭侧边导航窗格。 URL示例:

1. https://example.com/test.pdf#Chapter6  
2. https://example.com/test.pdf#page=3  
3. https://example.com/test.pdf#zoom=50  
4. https://example.com/test.pdf#page=3&zoom=200,250,100  
5. https://example.com/test.pdf#toolbar=0  
6. https://example.com/test.pdf#navpanes=0  

复制代码

​

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4