鸿蒙PDF预览

PDFView

• 三方库中心仓： https://ohpm.openharmony.cn/#/cn/detail/@hjm%2Fpdfview

---

简介

PDFView ，是一款高性能预览pdf文件的库。

• 支持在线PDF文件预览
• 支持本地rawfile文件预览
• 使用Lazy懒加载方式，优化性能
• 支持分页加载
• API 12

---

下载安装

ohpm install @hjm/pdfview

---

接口和属性列表

接口列表

接口	参数	描述
pdfInit	(totalPage: 总页数,pagesPerLoad: 当前分页数)	PDF初始化数据回调函数
onReachEnd	(totalPage: 总页数)	PDF滑动到底部回调函数
onScrollIndex	(pageIndex: 当前滚动索引值)	PDF滑动时回调函数

属性列表

属性	描述
pdfUrl	PDF文件地址（在线地址或者本地地址）
pagesPerLoad	分页加载数量

性能分析

---

• 结合HarmonyOS官方文档要求，应用CPU占用峰值应< 2%为性能最优体验，使用PDFView加载100页的PDF性能表现如下：

  
  PDFViewProfiler.png

使用示例

---

import { PDFView } from '@hjm/pdfview'

@Entry
@Component
struct Test8Page {
  // @State pdfUrl: string = 'https:XXXX/test/demo.pdf';  //在线地址
  @State pdfUrl: Resource = $rawfile('demo.pdf');  //本地地址

  build() {
    Column(){
      Row(){
        PDFView({
          /* 数据源 */
          pdfUrl:this.pdfUrl,
          /* 实现分页加载功能，以缩短首页加载时间。 */
          pagesPerLoad: 10,
          /**
           * PDF初始化数据回调函数。`
           * @param {number} totalPage - PDF文档的总页数。
           * @param {number} pagesPerLoad - 每次分页加载的页数。
           */
          pdfInit: (totalPage: number,pagesPerLoad: number) => {
            console.log('总页数为：',totalPage,'，当前分页数为：',pagesPerLoad)
          },
          /**
           * PDF滑动到底部回调函数。
           * @param {number} totalPage - PDF文档的总页数。
           */
          onReachEnd: (totalPage: number) => {
            console.log('总页数为：',totalPage)
          },
          /**
           * PDF滑动时回调函数。
           * @param {number} pageIndex - PDF文档当前滚动索引值。
           */
          onScrollIndex: (pageIndex: number) => {
            console.log(`当前滚动到第${pageIndex}页`)
          },
        })
      }
      .width('100%')
      .height('100%')

    }
    .width('100%')
    .height('100%')
  }
}