鸿蒙NEXT版仿华为阅读App的逐页浏览PDF

上一篇文章虽然使用PdfView组件及其控制器实现了PDF文档的加载功能，但实际的渲染结果会把PDF的所有页面都显示出来，而非由用户控制的一页一页浏览。那么若想实现更加精细的浏览操作，就要引入PDF服务模块pdfService了。

pdfService模块不仅支持文档加载、翻页、转存图片等常见功能，还为应用提供统一的管理PDF页面的页眉页脚、水印和背景、文档的多种批注风格和书签便捷的PDF能力。

pdfService的常用方法说明如下：

loadDocument：加载指定路径的PDF文件。

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

saveDocument：保存PDF文档。

createDocument：创建空白文档。

getPageCount：获取文档页数。

getPage：获取指定页码的页面。页面对象为pdfService.PdfPage类型。

insertBlankPage：在指定位置插入空白页。

deletePage：删除指定位置的PDF页。

movePage：将指定页面移到索引位置。

getMetadata：获取PDF元数据，包括作者、创建者、创建日期等。

convertToImage：把PDF文档转换为图片。

以上方法当中，getPage返回的页面对象还需进一步处理，PdfPage类型的常用方法说明如下：

getDocument：获取PDFDocument对象。

getAnnotations：获取文档批注。

addAnnotation：在当前页添加批注。

setAnnotation：在当前页设置批注。

removeAnnotation：删除当前页批注。

getIndex：获取当前页的索引。

getWidth：获取当前页的宽度。

getHeight：获取当前页的高度。

getPagePixelMap：获取当前页的图片。图片对象为image.PixelMap类型的像素图，可让Image组件提前绑定像素图对象，即可将获取的图片即时渲染在界面上。

release：释放已加载的PDF页面。

下面分别介绍如何实现PDF文档常见的几种浏览场景。

1、加载PDF文件并显示第一页内容

先给ETS页面分别声明PDF文件路径、像素图对象、PDF文档对象，如下所示：

@State filePath: string = '';
@State pixelMap: PixelMap | undefined = undefined;
private document: pdfService.PdfDocument = new pdfService.PdfDocument;

再调用PDF文档对象的loadDocument方法加载PDF文件，并调用getPage方法获取第一页的页面对象、调用页面对象的getPagePixelMap获取该页的像素图，如下所示：

// 注意filePath必须为PDF文件的应用沙箱路径
this.document.loadDocument(this.filePath, '');
let page: pdfService.PdfPage = this.document.getPage(0); //默认第一页
this.pixelMap = page.getPagePixelMap(); //设置Image组件参数

2、显示PDF文档的下一页内容

事先给ETS页面声明页码变量pageIndex，那么翻到下一页就是对pageIndex加一，再调用getPage方法获取下一页的页面对象，如下所示：

this.pageIndex++;
if (this.pageIndex >= this.document.getPageCount()) {
  promptAction.showToast({ message: '已是最后一页' })
  this.pageIndex--;
  return;
}
let page: pdfService.PdfPage = this.document.getPage(this.pageIndex); //设置页面为下一页
this.pixelMap = page.getPagePixelMap(); // 设置Image组件参数

3、显示PDF文档的上一页内容

事先给ETS页面声明页码变量pageIndex，那么翻到上一页就是对pageIndex减一，再调用getPage方法获取上一页的页面对象，如下所示：

this.pageIndex--;
if (this.pageIndex < 0) {
  promptAction.showToast({ message: '已是第一页' })
  this.pageIndex++;
  return;
}
let page: pdfService.PdfPage = this.document.getPage(this.pageIndex); //设置页面为上一页
this.pixelMap = page.getPagePixelMap(); //设置Image组件参数

4、把PDF文档的每个页面都保存为图片

先在应用沙箱内部创建待保存图片的新目录，再调用PDF文档对象的convertToImage方法，把已加载的PDF文档各页面都转为图片后保存到沙箱目录。如下所示：

// 注意：图片保存路径必须位于应用沙箱内部
fileIo.mkdir(this.imageDir);
//将整个PDF文件转为图片
let result = this.document.convertToImage(this.imageDir, pdfService.ImageFormat.PNG);
if (result) {
  promptAction.showToast({ message: 'PDF转图片成功，存储目录为：'+this.imageDir })
} else {
  promptAction.showToast({ message: 'PDF转图片失败，请检查用户权限' })
}

以上PDF操作代码对应的界面效果如下图所示。