OpenHarmony三方组件： pdfViewer

Handpc

发布于 2023-3-16 10:36

浏览

0收藏

简介

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

安装模块

使用npm install 安装

npm install @ohos/pdfjs --save
  npm install @ohos/img2pdf --save1.
2.

OpenHarmony npm环境配置等更多内容，请参照如何安装OpenHarmony npm包。

使用说明

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

import resourceManager from '@ohos.resourceManager';
    
    resourceManager.getResourceManager((error, mgr) => {
      if (error != null) {
        console.log("error occurs" + error);
        return;
      }
      mgr.getRawFile("rawfile/text.pdf", (error, value) => {
        if (error != null) {
          console.log(error.message);
        } else {
          var loadingTask = getDocument(value);
        }
      })
    });1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

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

loadingTask.promise.then((pdf) => {
      // 获取第一页pdf数据
      pdf.getPage(1).then((page) => {
        // TODO 进行getViewport操作
      })
    })1.
2.
3.
4.
5.
6.

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

page.getViewport({ scale: 1 }).width
    page.getViewport({ scale: 1 }).height1.
2.

4.通过jspdf 图片转pdf。

import { jsPDF } from "@ohos/img2pdf"
        
        var imageData = imageData
        var data = path
        var jsPdf = new jsPDF();
        jsPdf.addImage(imageData, 50, 50, 150, 150);
        var content = jsPdf.buildDocument();

        var buf = jsPdf.getArrayBuffer(content)
        const writer = fileio.openSync(data + `/pdfMessage.pdf`, 0o102, 0o666);
        fileio.writeSync(writer, buf);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

接口说明

1、读取pdf。

方法名	入参	接口描述
getDocument	src	加载PDF并与PDF交互的主要入口
setPDFNetworkStreamFactory	pdfNetworkStreamFactory	返回一个解析为{IPDFStream}实例的回调
annotationStorage		存储表单中的注解数据
getPageLayout		返回一个包含页面布局名称的字符串的promise

2、图片转pdf。

方法名	入参	接口描述
jsPDF	options：默认导出为a4纸张，纵向，单位为毫米	jsPDF实例化
addImage	imageData：图片内容，arguments：图片大小	将图片转化pdf
buildDocument		获取转化pdf的content数据
getArrayBuffer	data：需要转化的string	返回ArrayBuffer数组

目录结构

/pdfViewer  # 工程代码
|—— entry   # 工程demo示例
|—— img2pdf
│   └── src
│       └── libs
│       └── modules 
│       └── index.js       # 对外接口
├── pdfJs     
│   └── src
│       └── core
│       └── display
│       └── shared  
│       └── dca-library.js
│       └── deepCopyAll.js
│       └── index.js        # 对外接口1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.