【HarmonyOS】Web 组件的 PDF 文档预览功能详解

GeorgeGcs
• 阅读 2

【HarmonyOS】Web 组件的 PDF 文档预览功能详解

一、前言

应用开发中,PDF 文档预览是一项常见需求。虽然官方提供了预览组件,但是在H5业务场景下,如何加载PDF呢?

此时就需要Web 组件提供了便捷的 PDF 预览能力。目前官方的ArkWeb,支持加载网络、应用沙箱内、本地资源等多种来源的 PDF 文档。

本文将详细介绍如何使用 Web 组件实现 PDF 预览功能,包括不同场景下的加载方法、配置要点及动态切换技巧,帮助开发者快速集成 PDF 预览功能到自己的应用中。

二、使用步骤

1. 基础配置 使用 Web 组件预览 PDF 需要注意以下基础配置: 开启 DOM 存储权限:由于 PDF 预览页面会使用window.localStorage记录侧导航栏状态,必须设置domStorageAccess(true) 网络访问权限:若需加载网络 PDF,需在module.json5中配置互联网权限


"requestPermissions":[
  {
    "name" : "ohos.permission.INTERNET"
  }
]

2. 加载不同来源的 PDF 文档 场景一:预览网络 PDF 文档 直接通过网络 URL 加载,无需额外权限(已配置互联网权限前提下):


Web({ 
  src: "https://www.example.com/test.pdf",
  controller: this.controller 
})
  .domStorageAccess(true)

场景二:预览应用沙箱内 PDF 文档 需要开启文件系统访问权限,使用应用沙箱路径加载:


Web({ 
  src: this.getUIContext().getHostContext()!.filesDir + "/test.pdf",
  controller: this.controller 
})
  .domStorageAccess(true)
  .fileAccess(true)  // 必须开启文件访问权限

场景三:预览本地资源 PDF 文档 支持两种本地资源路径格式,无需额外权限:


// 格式一:使用resource协议
Web({ 
  src: "resource://rawfile/test.pdf",
  controller: this.controller 
})
  .domStorageAccess(true)

// 格式二:使用$rawfile语法
Web({ 
  src: $rawfile('test.pdf'),
  controller: this.controller 
})
  .domStorageAccess(true)

3. 动态切换 PDF 文档 Web 组件的src参数无法通过状态变量动态更改,需使用loadUrl()方法实现动态切换:


// 切换到新的PDF文档
this.controller.loadUrl("https://www.example.com/new.pdf");

// 切换到沙箱内其他文档
this.controller.loadUrl(this.getUIContext().getHostContext()!.filesDir + "/new.pdf");

4. PDF 预览参数配置 可通过 URL 参数控制 PDF 初始显示状态,常用参数如下:

参数格式 描述
page=pagenum 指定初始页码(从 1 开始)
zoom=scale 设置缩放比例
toolbar=0 隐藏顶部工具栏
navpanes=0 隐藏侧边导航窗格
pdfbackgroundcolor=ffffff 设置背景色(十六进制 RGB,取值范围为 000000~ffffff)

示例:


// 加载第3页并设置50%缩放
this.controller.loadUrl("https://www.example.com/test.pdf#page=3&zoom=50");

// 隐藏工具栏和导航窗格
this.controller.loadUrl("resource://rawfile/test.pdf#toolbar=0&navpanes=0");

三、DEMO 源码

以下是完整的 PDF 预览示例代码,包含多种加载方式:

示例实现了 PDF 预览的完整功能,包括多种来源加载、动态切换和参数控制。开发者可根据实际需求选择合适的加载方式,并通过参数配置优化用户体验。


import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct PDFPreviewDemo {
  controller: webview.WebviewController = new webview.WebviewController();
  @State currentPdfType: string = "network";

  build() {
    Column() {
      Row({ space: 10 }) {
        Button("加载网络PDF")
          .onClick(() => {
            this.controller.loadUrl("https://www.example.com/test.pdf");
          })

        Button("加载沙箱PDF")
          .onClick(() => {
            this.controller.loadUrl(this.getUIContext().getHostContext()!.filesDir + "/test.pdf");
          })

        Button("加载资源PDF")
          .onClick(() => {
            this.controller.loadUrl("resource://rawfile/test.pdf");
          })

        Button("跳转到第3页")
          .onClick(() => {
            this.controller.loadUrl("https://www.example.com/test.pdf#page=3");
          })
      }
      .padding(10)

      Web({ 
        src: "https://www.example.com/test.pdf",  // 默认加载网络PDF
        controller: this.controller 
      })
        .domStorageAccess(true)
        .fileAccess(true)  // 为沙箱访问预留权限
        .width('100%')
        .height('80%')
    }
  }
}

点赞
收藏
评论区
推荐文章
布袋罗汉 布袋罗汉
2年前
PDF Expert for mac(pdf编辑工具)
PDFExpert是由Readdle开发的一款专业的PDF编辑和阅读工具。它可以帮助用户在Mac、iPad和iPhone等设备上查看、注释、编辑、填写和签署PDF文档。以下是PDFExpert的特点:PDF编辑:PDFExpert提供了丰富的PDF编辑功能
不才 不才
3年前
md-loader
mdloader组件文档是如何渲染出来文档用于描述系统功能,而组件文档描述组件的功能,对于前端组件为了直观体现一般会有一个预览模块,而一般组件文档都是采用markdown编写,而md是文本内容且并没有渲染组件代码的能力,那么这是如何做的呢?简单的说就是“自定义结构”,像elementui中对代码的描述为,中间的YOUCODE可以放简单的vue组件代码。这种
Easter79 Easter79
3年前
Vue PDF文件预览vue
  最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vuepdf组件,GitHub地址:https://github.com/FranckFreiburger/vuepdfreadme不过一般GitHub上的注释比较简洁,所以这里把自己实际使用的过程总结了
Stella981 Stella981
3年前
PDF组件Spire.PDF 教程:在C#中显示PDF文件的打印预览
本文演示如何使用Spire.PDF(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F3377%2Fdownload)和c#在Windows窗体应用程序中显示PDF文件的打印预览。在使用下面的代码之前,我们需要创建一个Windows窗
京东云开发者 京东云开发者
2个月前
源码补丁神器—patch-package
作者:张浩一、背景vue项目中使用第三方插件预览pdf,书写业务代码完美运行,pdf文件内容正常预览无问题。后期需求有变,业务需求增加电子签章功能。这个时候pdf文件的内容可以显示出来,但是公司的电子签章无法显示。这令人沮丧,因为已经编写了许多特定于此依赖
架构师手记 架构师手记
1星期前
PDF Kit 使用示例(HarmonyOS)
PDFKit使用示例(HarmonyOS)前言说起PDF,开发时总绕不开。最早做PDF相关功能,是帮同事搞个合同预览,结果一头雾水,踩了不少坑。后来用多了,发现HarmonyOS的PDFKit其实挺顺手,能编辑、能预览、还能加批注,基本上开发需求都能覆盖。
GeorgeGcs GeorgeGcs
1星期前
【HarmonyOS 5】鸿蒙应用实现发票扫描、文档扫描输出PDF图片或者表格的功能
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言图(11)HarmonyOS系统提供的核心场景化视觉服务,旨在帮助开发者快速实现移动端文档数字化功能。其核心能力包括:扫描合同、票据、会议记录并保存为PDF分享。拍摄课堂PPT、书
燕青 燕青
1年前
支持M1、VSD Viewer for Mac(Visio绘图文件阅读器) v6.16.1激活版
专业的macOSVisio绘图查看器。在Mac上预览,导航,显示隐藏层,预览形状数据,跟随超链接,打印,保存为PDF以及共享MSVisio绘图。特征基本特征•打开任何MS的Visio®20002013年绘制VDX/VSDX文件格式•滚动,缩放和导航文档•浏
源码补丁神器—patch-package
一、背景vue项目中使用第三方插件预览pdf,书写业务代码完美运行,pdf文件内容正常预览无问题。后期需求有变,业务需求增加电子签章功能。这个时候pdf文件的内容可以显示出来,但是公司的电子签章无法显示。这令人沮丧,因为已经编写了许多特定于此依赖项的代码,
移动端提高pdf预览清晰度
背景:移动端预览PDF文件,通用的解决方案是使用vuepdf插件,其内置pdf.js,原理是基于HTML5的标签,通过将PDF文件转换为图片或来实现对PDF文件的预览,插件好使没毛病😆,但是如果我们的需求是要在移动端预览内容很密集的文件时,预览效果就不理
GeorgeGcs
GeorgeGcs
Lv1
男 · 金融头部企业 · 鸿蒙应用架构师
HarmonyOS认证创作先锋,华为HDE专家,鸿蒙讲师,作者。目前任职鸿蒙应用架构师。 历经腾讯,宝马,研究所,金融。 待过私企,外企,央企。 深耕大应用开发领域十年。 AAE,Harmony(OpenHarmony\HarmonyOS),MAE(Android\IOS),FE(H5\Vue\RN)。
文章
64
粉丝
1
获赞
2