鸿蒙NEXT版仿华为阅读App的浏览PDF文档

HarmonyOS NEXT自带的PDF Kit提供了PDF文档浏览和修改服务，不但支持预览PDF文档内容，还支持对PDF文档添加文本内容、图片、批注、页眉页脚、水印、背景图片、书签等。

使用PDF服务之前，要先在ETS代码开头添加以下的导包语句，表示引入PDF服务需要的pdfService、pdfViewManager、PdfView等模块，及其依赖的BusinessError模块：

代码语言：javascript代码运行次数：0运行复制

import { pdfService, pdfViewManager, PdfView } from '@kit.PDFKit';
import { BusinessError } from '@kit.BasicServicesKit';

其中PdfView为界面布局需要的PDF预览组件，用来展示PDF文档内容。PdfView组件的构造接口可输入以下字段：

controller：PdfView组件的控制器，取值为pdfViewManager.PdfController类型。

pageLayout：页面布局显示模式。取值为pdfService.PageLayout枚举，为LAYOUT_SINGLE代表单页显示，为LAYOUT_DOUBLE代表双页显示。默认LAYOUT_SINGLE。

isContinuous：是否连续预览。取值true代表连续预览，取值false代表不连续预览。默认true。

showScroll：是否显示滚动条。取值true代表显示滚动条，取值false代表隐藏滚动条。默认true

pageFit：页面适配模式。取值为pdfService.PageFit枚举，为FIT_NONE代表实际大小，为FIT_PAGE代表按页缩放，为FIT_WIDTH代表按宽度缩放，为FIT_HEIGHT代表按高度缩放。默认FIT_NONE。

以上字段当中，controller为必填字段，其余为可选字段。不过建议将pageFit字段设置为pdfService.PageFit.FIT_WIDTH，这样PDF页面能够适配屏幕宽度缩放，否则原始页面太大，手机屏幕放不下。

为什么controller是必填字段呢？这是因为只有控制器才能加载指定路径的PDF文件，也只有控制器才能操纵PDF文档的浏览动作。控制器类型pdfViewManager.PdfController主要提供了下列方法：

registerPageCountChangedListener：注册总页数变化的时候监听器，必须在loadDocument之前调用。

loadDocument：加载指定路径的PDF文件，并通过PdfView组件显示PDF文档内容，使用Promise异步回调。

releaseDocument：释放已加载的PDF文档。

saveDocument：保存PDF文档，使用Promise异步回调。

由于loadDocument方法只能加载应用沙箱内部的PDF文件，因此其他来源的PDF文档必须先复制到应用沙箱，再让PDF控制器加载沙箱PDF。为此可将PDF文档的浏览功能分解成以下几个步骤：

1、给ETS页面声明一个控制器实例，并在build函数中添加PdfView组件的布局内容，如下所示：

代码语言：javascript代码运行次数：0运行复制

private controller = new pdfViewManager.PdfController();
build() {
  Column() {
    PdfView({
      controller: this.controller,
      pageFit: pdfService.PageFit.FIT_WIDTH,
    }).width('100%')
  }.width('100%').height('100%')
}

2、把其他地方的PDF文件复制到应用内部的沙箱路径，比如下面代码把资源目录下的tangshi.pdf文档复制到了应用沙箱。

代码语言：javascript代码运行次数：0运行复制

let context = getContext() as common.UIAbilityContext;
// 确保在工程目录src/main/resources/rawfile里存在tangshi.pdf文档
let filePath = context.filesDir + '/' + this.fileName;
let res = fileIo.accessSync(filePath);
if (!res) {
  let content = context.resourceManager.getRawFileContentSync('rawfile/'+this.fileName);
  let file = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
  fileIo.writeSync(file.fd, content.buffer);
  fileIo.closeSync(file.fd);
}

3、调用PDF控制器的loadDocument方法，从应用沙箱路径加载PDF文件，加载代码如下所示：

代码语言：javascript代码运行次数：0运行复制

(async () => { // 异步方式加载PDF文档
  // 该监听方法只能在文档加载前调用一次
  this.controller.registerPageCountChangedListener((pageCount: number) => {
    console.info('pageCount='+pageCount.toString());
  });
  // 注意：这里刚加载文档，请不要在这里立即设置PDF文档的预览方式
  this.controller.loadDocument(filePath)
    .then((loadResult: pdfService.ParseResult) => {
      console.info('loadDocument successfully, loadResult is: ' + JSON.stringify(loadResult));
    }).catch((err: BusinessError) => {
    console.error('loadDocument failed with err: ' + JSON.stringify(err));
  });
})() // 末尾的一对括号必不可少，不然异步代码块就不会被执行

以上PDF加载代码对应的PDF文档渲染效果如下图所示。

本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-04-20，如有侵权请联系 cloudcommunity@tencent 删除appnextpdf华为异步