# pdfViewer

**Repository Path**: qinjianqili/pdfViewer

## Basic Information

- **Project Name**: pdfViewer
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 18
- **Created**: 2023-05-04
- **Last Updated**: 2023-07-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# pdfViewer

## 简介


JavaScript实现的解析、展示PDF和图片添加到PDF，[pdfjs](https://gitee.com/openharmony-tpc/pdfViewer/blob/master/pdfJs/README.md) 可以在OpenHarmony设备上呈现PDF文件内容，[img2pdf](https://gitee.com/openharmony-tpc/pdfViewer/blob/master/img2pdf/README.md) 可以将 jpg、png图片格式添加到pdf的功能， 本工程基于开源库 [pdf.js](https://github.com/mozilla/pdf.js) 和 [jspdf](https://github.com/parallax/jsPDF) 进行修改适配OpenHarmony的组件工程。

## 安装模块

使用npm install 安装

```
  npm install @ohos/pdfjs
```

OpenHarmony npm环境配置等更多内容，请参照 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。

使用ohpm install 安装

```
  ohpm install @ohos/img2pdf 
```

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 [OpenHarmony ohpm 包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md) 。


## 使用说明
### 配置全局resourceManager

pdfjs 获取资源文件需要在EntryAbility文件配置全局resourceManager
```
globalThis.resourceManager = this.context.resourceManager;
```
### 1.使用getDocument(src:Uint8Array)方式加载要打开的PDF文件数据。
```    
    globalThis.resourceManager.getRawFile(pdfFilePath, (error, value) => {
      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。
```
        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);
```

### 5.多张图片转pdf。
```
        import jsPDF from "@ohos/img2pdf"
        
        var imageData = imageData
        var imageData1 = imageData1
        var imageData2 = imageData2
        var data = path
        var jsPdf = new jsPDF();
        jsPdf.addImage(imageData, 10, 10, 20, 20);
        jsPdf.addImage(imageData1, 70, 10, 100, 40);
        jsPdf.addImage(imageData2, 100, 100, 100, 40);
        var content = jsPdf.buildDocument();

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

由于img2pdf是基于开源库jspdf进行修改适配OpenHarmony的组件，所以更多的图片转pdf [使用方法可以参考jspdf的使用](https://artskydj.github.io/jsPDF/docs/module-addImage.html) 。

## 接口说明

### 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
│       └── 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.0Canary2(4.0.3.312), SDK: API10(4.0.9.2)。

## 开源协议

本项目基于 [Apache License 2.0](https://gitee.com/openharmony-tpc/pdfViewer/blob/master/LICENSE) ，请自由地享受和参与开源。

## 贡献代码

使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-tpc/pdfViewer/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-tpc/pdfViewer/pulls) 。