本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

一、PdfView组件基础

1. 功能概述

PdfView是鸿蒙提供的PDF文档预览组件，支持本地网络及资源文件的加载，具备页面布局控制缩放滚动等交互功能。起始版本为5.0.0(12)，需导入@kit.PDFKit模块。

2. 导入模块

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

二、核心API详解

1. PdfController

控制PDF文档加载与交互：

private controller: pdfViewManager.PdfController = new pdfViewManager.PdfController();

// 加载文档（支持本地路径或Uint8Array）
const loadResult = await this.controller.loadDocument(filePath);
// 监听页数变化
this.controller.registerPageCountChangedListener((pageCount: number) => {
  console.log(`总页数: ${pageCount}`);
});

方法：

• loadDocument(path: string | Uint8Array): 加载PDF文件。
• goToPage(pageNum: number): 跳转指定页。
• getPageCount(): 获取总页数。

2. 页面布局参数

PdfView({
  controller: this.controller,
  pageLayout: pdfService.PageLayout.SINGLE, // 单页模式
  pageFit: pdfService.PageFit.FIT_WIDTH,    // 宽度适配
  isContinuous: false,                       // 非连续滚动
  showScroll: true                           // 显示滚动条
})

枚举值：

• PageLayout: SINGLE（单页）TWO（双页）BOOK（书籍模式）。
• PageFit: FIT_WIDTH``FIT_HEIGHT``FIT_BOTH。

三、示例代码

1. 加载本地PDF文件

import { common, fileIo } from '@kit.AbilityKit';

@Entry
@Component
struct PdfDemo {
  private controller: pdfViewManager.PdfController = new pdfViewManager.PdfController();

  aboutToAppear() {
    const context = getContext() as common.UIAbilityContext;
    const filePath = context.filesDir + '/test.pdf';
    
    // 检查文件是否存在，若不存在从rawfile拷贝
    if (!fileIo.accessSync(filePath)) {
      const content = context.resourceManager.getRawFileContentSync('rawfile/test.pdf');
      const fd = fileIo.openSync(filePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.WRITE_ONLY);
      fileIo.writeSync(fd.fd, content.buffer);
      fileIo.closeSync(fd.fd);
    }

    this.controller.loadDocument(filePath).then(() => {
      console.log('PDF加载成功');
    });
  }

  build() {
    Column() {
      PdfView({
        controller: this.controller,
        pageFit: pdfService.PageFit.FIT_WIDTH
      })
      .width('100%')
      .height('100%')
    }
  }
}

 2. 加载网络PDF（需权限）

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

this.controller.loadDocument('https://example.com/doc.pdf');

四、高级功能

1. 自定义工具栏

通过组合Button和PdfController实现翻页缩放：

Row() {
  Button('上一页').onClick(() => this.controller.goToPage(currentPage - 1));
  Text(`页码: ${currentPage}/${totalPages}`);
  Button('下一页').onClick(() => this.controller.goToPage(currentPage + 1));
}

 2. 页面渲染监听

this.controller.registerPageRenderListener((pageNum: number) => {
  console.log(`第${pageNum}页渲染完成`);
});

3. 加密PDF支持

const options: pdfService.LoadOptions = {
  password: '123456' // 解密密码
};
this.controller.loadDocument(filePath, options);

五、常见问题解决

1. 模块导入错误

   • 确保依赖版本匹配，若报错@hms:officeservice.PdfView不存在，检查模块名是否为@kit.PDFKit(#)。

2. 文件路径问题

   • 本地文件需确认沙箱路径或rawfile资源路径正确，示例中已展示动态拷贝方法 。

3. 性能优化

   • 大文件建议分页加载，避免一次性渲染所有页面。

六、替代方案（Web组件）

若需更灵活的PDF控制（如参数化URL），可使用Web组件：

Web({ 
  src: 'https://example.com/doc.pdf#toolbar=0&zoom=50',
  controller: this.webController 
})
.domStorageAccess(true)
.fileAccess(true)

参数示例：

• page=3: 跳转第3页。
• zoom=100,200,100: 缩放并滚动到指定位置 。