快捷導(dǎo)航

pdfh5.js的使用方法以及解決遇到的坑

更新時(shí)間：2024年02月03日 11:43:40 作者：愛(ài)分享的Hayes小朋友

這篇文章主要給大家介紹了關(guān)于pdfh5.js的使用方法以及解決遇到的坑的解決辦法,pdfh5.js基于pdf.js和jQuery,web/h5/移動(dòng)端PDF預(yù)覽手勢(shì)縮放插件,需要的朋友可以參考下

pdfh5.js的使用以及遇到的坑

pdfh5的地址：https://www.npmjs.com/package/pdfh5

在項(xiàng)目中引入pdfh5

 // 通過(guò)npm在項(xiàng)目中引入
 
  npm install pdfh5
  import Pdfh5 from "pdfh5";
  import "pdfh5/css/pdfh5.css";
  
   // 注意：css樣式也在script標(biāo)簽里通過(guò)import引入
   
// 使用

// 1.創(chuàng)建一個(gè)div
<div id='pdf'></div>

// 2.實(shí)例化
this.pdfh5 = new Pdfh5('#pdf',{
    // pdfurl和data二選一
	pdfurl:'pdf的路徑'，
	data:pdf文件流 // array，如果是base64編碼，需要先使用atob()轉(zhuǎn)為二進(jìn)制字符串
	})
	
// 3.監(jiān)聽(tīng)完成事件
this.pdfh5.on('事件名',function())

完成事件on函數(shù)的事件名

遇到的坑

引入css的坑
在引入css文件的時(shí)候，官方給出了兩種方式
第一種：在style標(biāo)簽里面通過(guò)@import 'pdfh5/css/pdfh5.css’方式，這種方式可能會(huì)報(bào)錯(cuò)
第二種：在script標(biāo)簽里面通過(guò)import ‘pdfh5/css/pdfh5.css’，建議使用這種方式
關(guān)于大文件加載切換問(wèn)題
當(dāng)pdf文件過(guò)大，有很多頁(yè)的時(shí)候，打開(kāi)pdf會(huì)處于慢慢加載的狀態(tài)
如果沒(méi)有加載完成，再次點(diǎn)擊另外一個(gè)pdf，就會(huì)出現(xiàn)pdf樣式錯(cuò)亂的問(wèn)題
因此，我們?cè)诿看沃匦麓蜷_(kāi)pdf的時(shí)候，執(zhí)行一下銷毀的操作

if (this.pdfh5) {
        this.pdfh5.destroy()
        this.pdfh5 = null
      }

3. 在那種需要切換的場(chǎng)景，會(huì)出現(xiàn)點(diǎn)擊空白的情況

比如：‘我已閱讀并同意xxx協(xié)議、xx協(xié)議’，點(diǎn)擊一個(gè)協(xié)議，就會(huì)彈出一個(gè)pdf

// 在創(chuàng)建div的時(shí)候，id需要隨之切換，如果id固定不變就會(huì)導(dǎo)致點(diǎn)擊其他的出現(xiàn)空白情況

// html，容器通過(guò)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>
// 或者動(dòng)態(tài)綁定id的值
<div class="content" :id="'medical-'+code" v-if="code === 'lpxz_b'"></div>


// js
this.pdfh5 = new Pdfh5(`#medical-${this.code}`, {
    pdfurl: url,
})

這些都是基本用法，其他詳細(xì)的api，可以去官網(wǎng)查看，地址在頂部第二行