鸿蒙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文档渲染效果如下图所示。