快捷導(dǎo)航

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

更新時(shí)間：2024年02月03日 11:43:40 作者：愛分享的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

 // 通過npm在項(xiàng)目中引入
 
  npm install pdfh5
  import Pdfh5 from "pdfh5";
  import "pdfh5/css/pdfh5.css";
  
   // 注意：css樣式也在script標(biāo)簽里通過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)聽完成事件
this.pdfh5.on('事件名',function())

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

遇到的坑

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

總結(jié)

到此這篇關(guān)于pdfh5.js的使用方法以及解決遇到的坑的文章就介紹到這了,更多相關(guān)pdfh5.js使用及踩坑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

使用PDFJS遇到的坑及解決辦法記錄

相關(guān)文章

js實(shí)現(xiàn)0ms延時(shí)定時(shí)器的幾種方式
本文主要介紹了js實(shí)現(xiàn)0ms延時(shí)定時(shí)器的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
JavaScript中Array的實(shí)用操作技巧分享
最近在調(diào)試JSP頁(yè)面時(shí)頻繁與ajax打交道，在復(fù)雜場(chǎng)景下，ajax傳參數(shù)就需要對(duì)大量參數(shù)進(jìn)行處理。這時(shí)我才發(fā)現(xiàn)，熟練Array的處理真的會(huì)使開發(fā)輕松不少??！下面就給大家分享下JavaScript中Array的實(shí)用操作技巧，有需要的可以參考借鑒。
2016-09-09
簡(jiǎn)單談?wù)凟S6的六個(gè)小特性
ES6（ECMAScript2015）的出現(xiàn)，無(wú)疑給前端開發(fā)人員帶來了新的驚喜，它包含了一些很棒的新特性，可以更加方便的實(shí)現(xiàn)很多復(fù)雜的操作，提高開發(fā)人員的效率。JS社區(qū)的每個(gè)人都喜歡新的API、語(yǔ)法以及一些簡(jiǎn)單、明了更高效的完成重要任務(wù)的新特性。下面來一起看看吧。
2016-11-11
十個(gè)優(yōu)秀的Ajax/Javascript實(shí)例網(wǎng)站收集
今天，要向大家推薦10個(gè)相當(dāng)棒的Ajax和Javascript國(guó)外資源網(wǎng)站或博客，它們提供了相當(dāng)多的高質(zhì)量Ajax、Javascript實(shí)例及教程，喜歡Ajax和Javascript的朋友絕對(duì)不能錯(cuò)過。
2010-03-03
javascript制作坦克大戰(zhàn)全紀(jì)錄（1）
本文寫作的目的是鞏固一下自己最近學(xué)習(xí)的js知識(shí), 這個(gè)教程適合熟悉js基本語(yǔ)法和面向?qū)ο笳Z(yǔ)法的小伙伴學(xué)習(xí)。由于自己也是剛學(xué)js不久，所以難免出現(xiàn)錯(cuò)誤。如果發(fā)現(xiàn)希望給予指正。
2014-11-11
js判斷輸入字符串是否為空、空格、null的方法總結(jié)
下面小編就為大家?guī)硪黄猨s判斷輸入字符串是否為空、空格、null的方法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
在 JavaScript 中用下劃線替換空格的方法
這篇文章主要介紹了在 JavaScript 中用下劃線替換空格的方法,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-05-05
詳解webpack4.x之搭建前端開發(fā)環(huán)境
這篇文章主要介紹了詳解webpack4.x之搭建前端開發(fā)環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
基于touch.js手勢(shì)庫(kù)+zepto.js插件開發(fā)圖片查看器（滑動(dòng)、縮放、雙擊縮放）
這篇文章主要為大家詳細(xì)介紹了touch.js手勢(shì)庫(kù)結(jié)合zepto.js插件開發(fā)圖片查看器，圖片可以實(shí)現(xiàn)滑動(dòng)、縮放、雙擊縮放等效果，
2016-11-11
JavaScript算法教程之sku（庫(kù)存量單位）詳解
這篇文章主要給大家介紹了JavaScript算法教程之sku（庫(kù)存量單位）的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
2017-06-06