简介

JavaScript实现的解析、展示PDF和图片添加到PDF，pdfjs 可以在OpenHarmony设备上呈现PDF文件内容，library可以将 jpg、png图片格式添加到pdf的功能， 本工程基于开源库 pdf.js和 jspdf 进行修改适配OpenHarmony的组件工程。

安装模块

使用npm install 安装

  npm install @ohos/pdfjs

使用ohpm install 安装

  ohpm install @ohos/img2pdf 

使用说明

配置全局resourceManager

pdfjs 获取资源文件需要在EntryAbility文件配置全局resourceManager

import { GlobalContext } from '../pages/globalThis'

GlobalContext.getContext().setObject(context, this.context)

1.使用getDocument(src:Uint8Array)方式加载要打开的PDF文件数据。

    import { GlobalContext } from '../pages/globalThis'

    gloContext: Context = GlobalContext.getContext().getObject(context) as Context
    gloContext.resourceManager.getRawFile(pdfFilePath, (error: Error, value: Uint8Array) => {
      if (error != null) {
        console.log(error.message);
      } else {
        this.getPDFDocument(value);
      }
    })

2.通过加载任务对象获取PDF文档中的各个页面。

    loadingTask.promise.then((pdf) => {
      // 获取首页pdf数据
      pdf.getPage(1).then((page) => {
        // TODO 进行getViewport操作
      })
    })    

3.通过getViewport()提供的展示比例，返回PDf文档的页面尺寸。

    page.getViewport({ scale: 1 }).width
    page.getViewport({ scale: 1 }).height

4.通过jspdf 图片转pdf。

以下为伪代码展示，imageData图片数据和path文件路径需要开发者自行定义。

		import jsPDF from @ohos/img2pdf

        let imageData = imageData
        let data = path
        let jsPdf = new jsPDF();
        jsPdf.addImage(imageData, 50, 50, 150, 150);
        let content = jsPdf.buildDocument();

        let buf = jsPdf.getArrayBuffer(content)
        const writer = fileio.openSync(data + `/pdfMessage.pdf`, 0o102, 0o666);
        fileio.writeSync(writer, buf);

5.多张图片转pdf。

以下为伪代码展示，imageData/imageData1/imageData2图片数据和path文件路径需要开发者自行定义。

        import jsPDF from @ohos/img2pdf

        let imageData = imageData
        let imageData1 = imageData1
        let imageData2 = imageData2
        let data = path
        let jsPdf = new jsPDF();
        jsPdf.addImage(imageData, 10, 10, 20, 20);
        jsPdf.addImage(imageData1, 70, 10, 100, 40);
        jsPdf.addImage(imageData2, 100, 100, 100, 40);
        let content = jsPdf.buildDocument();

        let buf = jsPdf.getArrayBuffer(content)
        const writer = fileio.openSync(data + `/pdfMessage.pdf`, 0o102, 0o666);
        fileio.writeSync(writer, buf);

由于img2pdf是基于开源库jspdf进行修改适配OpenHarmony的组件，所以更多的图片转pdf 使用方法可以参考jspdf的使用 。

DD一下： 鸿蒙开发各类文档，可关注公众号<程序猿百晓生>获取。

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

接口说明

1、读取pdf。

2、图片转pdf。

目录结构

/pdfViewer  # 工程代码
|—— entry   # 工程demo示例
|—— library
│   └── src
│       └── main
│           └── ets
│               └── components
│               └── btoa
│               └── fflate
│               └── libs
│               └── modules 
│               └── jspdf.js
│   └── index.ets               # 对外接口
├── pdfJs     
│   └── src
│       └── main
│           └── ets
│               └── components
│                   └── core
│                   └── display
│                   └── shared
│                   └── dca-library.js 
│                   └── deepCopyAll.js
│   └── index.ets               # 对外接口

约束与限制

在下述版本验证通过：

DevEco Studio: 4.0 Release(4.0.3.513), SDK: API10 (4.0.10.10)

DevEco Studio: 4.0 Beta2(4.0.3.512), SDK: API10 (4.0.10.9)

DevEco Studio版本: 4.0Canary2(4.0.3.312), SDK: API10(4.0.9.2)

DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release (5.0.0.66)