往期鸿蒙全套实战出色文章必看内容:
- 鸿蒙开发核心知识点,看这篇文章就够了
- 最新版!鸿蒙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,该地点为示例,使用时需替换为真实可访问地点:
- // xxx.ets
- import { webview } from '@kit.ArkWeb';
- @Entry
- @Component
- struct WebComponent {
- controller: webview.WebviewController = new webview.WebviewController();
- build() {
- Column() {
- Web({
- src:
- "https://www.example.com/test.pdf", // 方式一 加载网络PDF文档
- // getContext(this).filesDir + "/test.pdf", // 方式二 加载本地应用沙箱内PDF文档
- // "resource://rawfile/test.pdf", // 方式三 应用内resource资源PDF文档
- // $rawfile('test.pdf'), // 方式四 应用内resource资源PDF文档
- controller: this.controller
- })
- .domStorageAccess(true)
- }
- }
- }
复制代码 上述示例中,由于PDF预览页面临于侧边导航栏是否展开会根据用户操作使用window.localStorage举行持久化记载,以是需开启文档对象模型存储domStorageAccess权限:
- Web().domStorageAccess(true)
复制代码 在Web组件创建时,指定默认加载的PDF文档。在默认PDF文档加载完成后,如果必要变更此Web组件显示的PDF文档,可以通过调用loadUrl()接口加载指定的PDF文档。Web组件的第一个参数变量src不能通过状态变量(比方:@State)动态更改地点,如需更改,请通过loadUrl()重新加载。
同时包含三种PDF文档加载预览场景:
- 预览加载网络PDF文件
- Web({
- src: "https://www.example.com/test.pdf",
- controller: this.controller
- })
- .domStorageAccess(true)
复制代码 - 预览加载应用沙箱内PDF文件,必要开启应用中文件体系的访问fileAccess权限。
- Web({
- src: getContext(this).filesDir + "/test.pdf",
- controller: this.controller
- })
- .domStorageAccess(true)
- .fileAccess(true)
复制代码 - 预览加载应用内PDF资源文件,有两种使用形式。$rawfile('test.pdf')形式无法指定下面先容的预览参数。
- Web({
- src: "resource://rawfile/test.pdf", // 或 $rawfile('test.pdf')
- controller: this.controller
- })
- .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示例:
- https://example.com/test.pdf#Chapter6
- https://example.com/test.pdf#page=3
- https://example.com/test.pdf#zoom=50
- https://example.com/test.pdf#page=3&zoom=200,250,100
- https://example.com/test.pdf#toolbar=0
- https://example.com/test.pdf#navpanes=0
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |