鸿蒙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文档对象，如下所示：
代码语言：javascript代码运行次数：0运行复制@State filePath: string = '';
@State pixelMap: PixelMap | undefined = undefined;
private document: pdfService.PdfDocument = new pdfService.PdfDocument;再调用PDF文档对象的loadDocument方法加载PDF文件，并调用getPage方法获取第一页的页面对象、调用页面对象的getPagePixelMap获取该页的像素图，如下所示：
代码语言：javascript代码运行次数：0运行复制// 注意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方法获取下一页的页面对象，如下所示：
代码语言：javascript代码运行次数：0运行复制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方法获取上一页的页面对象，如下所示：
代码语言：javascript代码运行次数：0运行复制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文档各页面都转为图片后保存到沙箱目录。如下所示：
代码语言：javascript代码运行次数：0运行复制// 注意：图片保存路径必须位于应用沙箱内部
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操作代码对应的界面效果如下图所示。
发布评论