pdfh5.js的使用方法以及解决遇到的坑
作者：爱分享的Hayes小朋友
这篇文章主要给大家介绍了关于pdfh5.js的使用方法以及解决遇到的坑的解决办法,pdfh5.js基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件,需要的朋友可以参考下
pdfh5.js的使用以及遇到的坑
pdfh5的地址：https://www.npmjs.com/package/pdfh5
- 在项目中引入pdfh5
// 通过npm在项目中引入
npm install pdfh5
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
// 注意：css样式也在script标签里通过import引入
// 使用
// 1.创建一个div
<div id='pdf'></div>
// 2.实例化
this.pdfh5 = new Pdfh5('#pdf',{
// pdfurl和data二选一
pdfurl:'pdf的路径'，
data:pdf文件流 // array，如果是base64编码，需要先使用atob()转为二进制字符串
})
// 3.监听完成事件
this.pdfh5.on('事件名',function())完成事件on函数的事件名
遇到的坑
- 引入css的坑
在引入css文件的时候，官方给出了两种方式
第一种：在style标签里面通过@import 'pdfh5/css/pdfh5.css’方式，这种方式可能会报错
第二种：在script标签里面通过import ‘pdfh5/css/pdfh5.css’，建议使用这种方式 - 关于大文件加载切换问题
当pdf文件过大，有很多页的时候，打开pdf会处于慢慢加载的状态
如果没有加载完成，再次点击另外一个pdf，就会出现pdf样式错乱的问题
因此，我们在每次重新打开pdf的时候，执行一下销毁的操作
if (this.pdfh5) {
this.pdfh5.destroy()
this.pdfh5 = null
}
3. 在那种需要切换的场景，会出现点击空白的情况
比如：‘我已阅读并同意xxx协议、xx协议’，点击一个协议，就会弹出一个pdf
// 在创建div的时候，id需要随之切换，如果id固定不变就会导致点击其他的出现空白情况
// html，容器通过v-if就行切换
<div class="content" id="medical-zygz_b" v-if="code === 'zygz_b'"></div>
<div class="content" id="medical-lpxz_b" v-if="code === 'lpxz_b'"></div>
// 或者动态绑定id的值
<div class="content" :id="'medical-'+code" v-if="code === 'lpxz_b'"></div>
// js
this.pdfh5 = new Pdfh5(`#medical-${this.code}`, {
pdfurl: url,
})
这些都是基本用法，其他详细的api，可以去官网查看，地址在顶部第二行
总结
到此这篇关于pdfh5.js的使用方法以及解决遇到的坑的文章就介绍到这了,更多相关pdfh5.js使用及踩坑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！