# pdfh5.js
[](https://www.npmjs.com/package/pdfh5) [](https://www.npmjs.com/package/pdfh5) [](https://www.npmjs.com/package/pdfh5) [](https://github.com/gjTool/pdfh5/blob/master/LICENSE) [](https://github.com/gjTool/pdfh5/issues) [](https://github.com/gjTool/pdfh5/stargazers) [](https://github.com/gjTool/pdfh5/network/members)
- [全栈开发技术交流QQ群521681398](https://qm.qq.com/cgi-bin/qm/qr?k=3_qouxqe5w3gRCcHjpqkwtx-4yS6QSPD&jump_from=webapi&authKey=FlHU4wH2xOQUthUpgF5W3b1VXowCVmSRfJLU4GRcDVyBayJd1ank4HkOWSZei2f3)
**由于精力有限，本插件暂时不会更新了，如果有问题可以到博客留言并留下联系方式，抽空回复**
- [pdfh5博客主页](https://www.gjtool.cn/)
- [pdfh5项目GitHub地址](https://github.com/gjTool/pdfh5)
- [pdfh5项目gitee地址](https://gitee.com/gjTool/pdfh5)
#### react、vue均可使用
#### [example/test](https://github.com/gjTool/pdfh5/tree/master/example/test)是vue使用示例，vue示例展示axios调用接口展示pdf，跨域代理，相对路径等方法
#### [example/react-test](https://github.com/gjTool/pdfh5/tree/master/example/react-test)是react使用示例
## 更新信息
- 2023.05.23 更新： 修改默认cMapUrl地址为官方pdf.js的字体文件路径
### pdfh5在线预览 （建议使用谷歌浏览器F12手机模式打开预览）
- [https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf](https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf)
## 快速使用（有两种方式）
#### 一、script标签引入方式（需下载本项目文件夹css/pdfh5.css、js内所有文件）
- 1.引入css
```javascript
<link rel="stylesheet" href="css/pdfh5.css" />
```
- 2.创建div
```javascript
<div id="demo"></div>
```
- 3.依次引入js（需引用本项目的js,不要引用官方的pdf.js,jquery可以引用其它版的）
```javascript
<script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
```
- 4.实例化
```javascript
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf"
});
```
#### 二、npm安装方式（适应于vue）, react使用方法类似vue（example/react-test是react使用示例）
- 1.安装
```javascript
npm install pdfh5
```
- 2.使用
```javascript
<template>
<div id="app">
<div id="demo"></div>
</div>
</template>
<script>
import Pdfh5 from "pdfh5";
export default {
name: 'App',
data() {
return {
pdfh5: null
};
},
mounted() {
//实例化
this.pdfh5 = new Pdfh5("#demo", {
pdfurl: "../../static/test.pdf"
});
//监听完成事件
this.pdfh5.on("complete", function (status, msg, time) {
console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
})
}
}
</script>
<style>
@import "pdfh5/css/pdfh5.css";
*{
padding: 0;
margin: 0;
}
html,body,#app {
width: 100%;
height: 100%;
}
</style>
```
- **注意：如果css引用报错的话，按下面的方式引用。**
```javascript
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
```
# API接口方法
## 实例化
- **pdfh5实例化的时候传两个参数，selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件**
```javascript
var pdfh5 = new Pdfh5(selector, options);
```
|参数名称 |类型 |取值 |是否必须 |作用 |
|:---: |:---: |:---: |:---: |:---: |
|selector | String | - | √ |pdfh5的容器选择器 |
|options | Object | - | × |pdfh5的配置项参数 |
## options配置项参数列表
- **示例：** 配置项参数 pdfurl
```javascript
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf"
});
```
|参数名称 |类型 |取值 |作用 |
|:---: |:---: |:---: |:---: |
|pdfurl | String | - |pdf地址 |
|URIenable | Boolean |true、false， 默认false | true开启地址栏file参数 |
|data | Array(arraybuffer) | - |pdf文件流 ，与pdfurl二选一(二进制PDF数据。使用类型化数组（Uint8Array）可以提高内存使用率。如果PDF数据是BASE64编码的，请先使用atob（）将其转换为二进制字符串。) |
|renderType | String |"canvas"、"svg"，默认"canvas" |pdf渲染模式 |
|pageNum | Boolean |true、false， 默认true |是否显示左上角页码 |
|backTop | Boolean |true、false， 默认true |是否显示右下角回到顶部按钮 |
|lazy | Boolean |true、false， 默认false |是否开启懒加载(实际是延迟加载图片，即屏幕滚动到pdf位置时加载图片) |
|maxZoom | Number |最大倍数3 |手势缩放最大倍数 |
|scale | Number |最大比例5，默认1.5 |pdf渲染的比例 |
|scrollEnable | Boolean |true、false， 默认true |是否允许pdf滚动 |
|zoomEnable | Boolean |true、false， 默认true |是否允许pdf手势缩放 |
|cMapUrl | String | 默认"https://unpkg.com/pdfjs-dist@2.0.943/cmaps/" |解析pdf时，特殊情况下显示完整字体的cmaps文件夹路径 |
|limit | Number | 默认0 |限制pdf加载最大页数 |
|logo | Object |{src:"pdfh5.png",x:10,y:10,width:40,height:40}src水印图片路径（建议使用png透明图片），width水印宽度，height水印高度，以每页pdf左上角为0点，x、y为偏移值。 默认false|给每页pdf添加水印logo（canvas模式下使用） |
|goto | Number | 默认0 |加载pdf跳转到第几页 |
|textLayer | Boolean | true、false， 默认false |是否开启textLayer，可以复制文本（canvas模式下使用）【处于测试阶段，位置偏移严重】 |
|background | Object | {color:"#fff",image:"url('pdfh5.png')",repeat:"no-repeat",position:"left top",size:"40px 40px"}，和css的background属性语法相同，默认false |是否开启背景图模式 |
- 以下属性可选
|参数名称 |类型 |取值 |作用 |
|:---: |:---: |:---: |:---:
pdfh5-master.zip （68个子文件） 
pdfh5-master 
pdfh5.png 13KB
.travis.yml 40B js jquery-3.6.0.min.js 87KB jquery.qrcode.min.js 14KB pdfh5.js 63KB pdf.js 337KB pdf.worker.js 770KB LICENSE 1KB
git.pdf 371KB package.json 2KB css style.css 36KB pdfh5.css 9KB .npmignore 103B
index.html 14KB .gitignore 46B pdf.html 8KB example test .editorconfig 147B src App.vue 1KB assets logo.png 7KB main.js 198B components HelloWorld.vue 2KB router index.js 251B .babelrc 230B package.json 2KB .postcssrc.js 246B index.html 270B .gitignore 154B static git.pdf 371KB .gitkeep 0B test.pdf 165KB README.md 465B config prod.env.js 61B index.js 2KB dev.env.js 156B react-test yarn.lock 451KB src serviceWorker.js 5KB App.test.js 280B setupTests.js 255B
logo.svg 3KB App.js 255B App.css 595B index.js 503B pdf.js 577B index.css 415B package.json 4KB public logo512.png 9KB manifest.json 492B
robots.txt 67B logo192.png 5KB git.pdf 371KB favicon.ico 3KB index.html 2KB .gitignore 310B README.md 3KB config jest cssTransform.js 314B fileTransform.js 1KB webpack.config.js 29KB pnpTs.js 620B getHttpsConfig.js 2KB paths.js 2KB env.js 4KB modules.js 4KB webpackDevServer.config.js 7KB scripts build.js 7KB test.js 1KB start.js 5KB README.md 14KB test.pdf 165KB资源评论
