pdfh5.js的使用方法以及解決遇到的坑
更新時間：2024年02月03日 11:43:40 作者：愛分享的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.創(chuàng)建一個div
<div id='pdf'></div>
// 2.實例化
this.pdfh5 = new Pdfh5('#pdf',{
// pdfurl和data二選一
pdfurl:'pdf的路徑'，
data:pdf文件流 // array，如果是base64編碼，需要先使用atob()轉為二進制字符串
})
// 3.監(jiān)聽完成事件
this.pdfh5.on('事件名',function())完成事件on函數(shù)的事件名
遇到的坑
- 引入css的坑
在引入css文件的時候，官方給出了兩種方式
第一種：在style標簽里面通過@import 'pdfh5/css/pdfh5.css’方式，這種方式可能會報錯
第二種：在script標簽里面通過import ‘pdfh5/css/pdfh5.css’，建議使用這種方式 - 關于大文件加載切換問題
當pdf文件過大，有很多頁的時候，打開pdf會處于慢慢加載的狀態(tài)
如果沒有加載完成，再次點擊另外一個pdf，就會出現(xiàn)pdf樣式錯亂的問題
因此，我們在每次重新打開pdf的時候，執(zhí)行一下銷毀的操作
if (this.pdfh5) {
this.pdfh5.destroy()
this.pdfh5 = null
}
3. 在那種需要切換的場景，會出現(xiàn)點擊空白的情況
比如：‘我已閱讀并同意xxx協(xié)議、xx協(xié)議’，點擊一個協(xié)議，就會彈出一個pdf
// 在創(chuàng)建div的時候，id需要隨之切換，如果id固定不變就會導致點擊其他的出現(xiàn)空白情況
// 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>
// 或者動態(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,
})
這些都是基本用法，其他詳細的api，可以去官網(wǎng)查看，地址在頂部第二行
總結
到此這篇關于pdfh5.js的使用方法以及解決遇到的坑的文章就介紹到這了,更多相關pdfh5.js使用及踩坑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
本文主要介紹了js實現(xiàn)0ms延時定時器的幾種方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
最近在調(diào)試JSP頁面時頻繁與ajax打交道，在復雜場景下，ajax傳參數(shù)就需要對大量參數(shù)進行處理。這時我才發(fā)現(xiàn)，熟練Array的處理真的會使開發(fā)輕松不少！！下面就給大家分享下JavaScript中Array的實用操作技巧，有需要的可以參考借鑒。2016-09-09
ES6（ECMAScript2015）的出現(xiàn)，無疑給前端開發(fā)人員帶來了新的驚喜，它包含了一些很棒的新特性，可以更加方便的實現(xiàn)很多復雜的操作，提高開發(fā)人員的效率。JS社區(qū)的每個人都喜歡新的API、語法以及一些簡單、明了更高效的完成重要任務的新特性。下面來一起看看吧。2016-11-11
十個優(yōu)秀的Ajax/Javascript實例網(wǎng)站收集
今天，要向大家推薦10個相當棒的Ajax和Javascript國外資源網(wǎng)站或博客，它們提供了相當多的高質(zhì)量Ajax、Javascript實例及教程，喜歡Ajax和Javascript的朋友絕對不能錯過。2010-03-03
本文寫作的目的是鞏固一下自己最近學習的js知識, 這個教程適合熟悉js基本語法和面向對象語法的小伙伴學習。由于自己也是剛學js不久，所以難免出現(xiàn)錯誤。如果發(fā)現(xiàn)希望給予指正。2014-11-11
下面小編就為大家?guī)硪黄猨s判斷輸入字符串是否為空、空格、null的方法總結。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了在 JavaScript 中用下劃線替換空格的方法,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
詳解webpack4.x之搭建前端開發(fā)環(huán)境
這篇文章主要介紹了詳解webpack4.x之搭建前端開發(fā)環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
基于touch.js手勢庫+zepto.js插件開發(fā)圖片查看器（滑動、縮放、雙擊縮放）
這篇文章主要為大家詳細介紹了touch.js手勢庫結合zepto.js插件開發(fā)圖片查看器，圖片可以實現(xiàn)滑動、縮放、雙擊縮放等效果，2016-11-11
這篇文章主要給大家介紹了JavaScript算法教程之sku（庫存量單位）的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-06-06