pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。支持canvas和svg两种渲染模式，支持ajax和fetch两种请求方式。支持懒加载。
npm install pdfh5 --save-dev
<template>
<div id="pdf">
<div id="demo"></div>
</div>
</template>
<script>
import Pdfh5 from "pdfh5";
export default {
name: 'pdf',
data() {
return {
pdfh5: null
};
},
mounted() {
//实例化
this.pdfh5 = new Pdfh5("#demo", {
pdfurl: "/test.pdf",
lazy:true
}).on("complete", function (status, msg, time) { //监听完成事件
console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
})
}
}
</script>
<style>
*{
padding: 0;
margin: 0;
}
html,body,#app {
width: 100%;
height: 100%;
}
#demo svg{
height: calc(100vh) !important;
}
</style>实例化
pdfh5实例化的时候传两个参数，selector选择器，options配置项参数，options可以不填写，会自动获取浏览器地址栏？file=后面的地址。会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
var pdfh5 = new Pdfh5(selector, options);
| 参数名称 | 类型 | 取值 | 是否必须 | 作用 |
|---|---|---|---|---|
| selector | {String} | - | √ | pdfh5的容器选择器 |
| options | {Object} | - | × | pdfh5的配置项参数 |
options配置项参数列表
示例： 配置项参数 lazy:true 开启懒加载，默认是false,不开启懒加载
var pdfh5 = new Pdfh5('#demo', { pdfurl: "./default.pdf", lazy:true});| 参数名称 | 类型 | 取值 | 作用 |
|---|---|---|---|
| pdfurl | {String} | - | pdf地址，当前默认优先获取浏览器地址栏？file=后面的地址，如果地址栏没有，再拿配置项的pdfurl或者data来渲染pdf，优先顺序： ？file= > pdfurl > data |
| URIenable | {Boolean} | true、false， 默认true | 可以无视地址栏参数，只拿配置项的pdfurl或者data来渲染pdf |
| data | {String(blob) / Array(Uint8Array)} | - | pdf文件流 ，与pdfurl二选一。可以传普通文件流blob，也可以传转过码的Uint8Array |
| type | {String} | "ajax"、"fetch"，默认"fetch" | 请求pdf方式 |
| renderType | {String} | "canvas"、"svg"，默认"svg" | pdf渲染模式 |
| scale | {Number} | 默认1.3。canvas模式下，为2 | 渲染的清晰度比例 |
| lazy | {Boolean} | true、false， 默认false | 是否开启懒加载 |
| maxZoom | {Number} | 默认4 | 手势缩放最大倍数 |
| tapZoomFactor | {Number} | 默认2 | 双击放大倍数 |
| scrollEnable | {Boolean} | true、false， 默认true | 是否允许pdf滚动 |
| zoomEnable | {Boolean} | true、false， 默认true | 是否允许pdf手势缩放 |
| cMapUrl | {String} | 默认"./js/cmaps/" | 解析pdf时，特殊情况下显示完整字体的cmaps文件夹路径 |
分享链接：https://www.gjtool.cn/articles/2019/09/04/1567571649102.html
