pdfh5.js 基于pdf.js和jQuery，web/h5/移動端PDF預覽手勢縮放插件。

• 注意：本地絕對路徑地址不能加載，跨域問題用代理或者服務端解決。

• svg模式渲染存在缺陷，只能渲染普通pdf，帶簽名、印章的可能會渲染不全，報錯，pdf.js官方目前沒有給出解決方案

• canvas模式本質是圖片，默認進去的時候，圖片在手機端被縮放，不是原分辨率，所以失真模糊。所以需要放大查看pdf

• pdfh5博客主頁

• pdfh5項目GitHub地址

react、vue均可使用

example/test是vue使用示例，vue示例展示axios調用接口展示pdf，跨域代理，相對路徑等方法

example/react-test是react使用示例

更新信息

• 2020.07.30 更新： 更新jquery版本至jquery-2.1.1.min.js

pdfh5在線預覽 （建議使用谷歌瀏覽器F12手機模式打開預覽）

• https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf

快速使用（有兩種方式）

一、script標簽引入方式（需下載本項目文件夾css/pdfh5.css、js內所有文件）

• 1.引入css

<link rel="stylesheet" href="css/pdfh5.css" />

• 2.創建div

<div id="demo"></div>

• 3.依次引入js（需引用本項目的js,不要引用官方的pdf.js,jquery可以引用其它版的）

<script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>

• 4.實例化

var pdfh5 = new Pdfh5('#demo', {pdfurl: "./default.pdf"
});

二、npm安裝方式（適應于vue）, react使用方法類似vue（example/react-test是react使用示例）

• 1.安裝

npm install pdfh5

• 2.使用

<template><div id="app"><div id="demo"></div></div>
</template>
<script>import Pdfh5 from "pdfh5";export default {name: 'App',data() {return {pdfh5: null};},mounted() {//實例化this.pdfh5 = new Pdfh5("#demo", {pdfurl: "../../static/test.pdf"});//監聽完成事件this.pdfh5.on("complete", function (status, msg, time) {console.log("狀態：" + status + "，信息：" + msg + "，耗時：" + time + "毫秒，總頁數：" + this.totalNum)})}}
</script><style>@import "pdfh5/css/pdfh5.css";*{padding: 0;margin: 0;}html,body,#app {width: 100%;height: 100%;}
</style>

• 注意：如果css引用報錯的話，按下面的方式引用。

  import Pdfh5 from "pdfh5";import "pdfh5/css/pdfh5.css";

API接口方法

實例化

• pdfh5實例化的時候傳兩個參數，selector選擇器，options配置項參數，會返回一個pdfh5實例對象，可以用來操作pdf，監聽相關事件

var pdfh5 = new Pdfh5(selector, options);

參數名稱	類型	取值	是否必須	作用
selector	?	-	√	pdfh5的容器選擇器
options	?	-	×	pdfh5的配置項參數

options配置項參數列表

• 示例：?配置項參數 pdfurl

var pdfh5 = new Pdfh5('#demo', {pdfurl: "./default.pdf"
});

參數名稱	類型	取值	作用
pdfurl	?	-	pdf地址
URIenable	?	true、false， 默認false	true開啟地址欄file參數
data	{String(blob)/Array(arraybuffer)	-	pdf文件流 ，與pdfurl二選一(二進制PDF數據。使用類型化數組（Uint8Array）可以提高內存使用率。如果PDF數據是BASE64編碼的，請先使用atob（）將其轉換為二進制字符串。)
renderType	?	"canvas"、"svg"，默認"canvas"	pdf渲染模式
pageNum	?	true、false， 默認true	是否顯示左上角頁碼
backTop	?	true、false， 默認true	是否顯示右上角回到頂部按鈕
lazy	?	true、false， 默認false	是否開啟懶加載(實際是延遲加載圖片，即屏幕滾動到pdf位置時加載圖片)
maxZoom	?	最大倍數3	手勢縮放最大倍數
scale	?	最大比例5，默認1.5	pdf渲染的比例
scrollEnable	?	true、false， 默認true	是否允許pdf滾動
zoomEnable	?	true、false， 默認true	是否允許pdf手勢縮放
cMapUrl	?	默認"https://www.gjtool.cn/cmaps/"	解析pdf時，特殊情況下顯示完整字體的cmaps文件夾路徑，例如 cMapUrl:"https://unpkg.com/pdfjs-dist@2.0.943/cmaps/"
limit	?	默認0	限制pdf加載最大頁數
logo	?	{src:"pdfh5.png",x:10,y:10,width:40,height:40}src水印圖片路徑（建議使用png透明圖片），width水印寬度，height水印高度，以每頁pdf左上角為0點，x、y為偏移值。 默認false	給每頁pdf添加水印logo（canvas模式下使用）
goto	?	默認0	加載pdf跳轉到第幾頁
textLayer	?	true、false， 默認false	是否開啟textLayer，可以復制文本（canvas模式下使用）【處于測試階段，位置偏移嚴重】
background	?	{color:"#fff",image:"url('pdfh5.png')",repeat:"no-repeat",position:"left top",size:"40px 40px"}，和css的background屬性語法相同，默認false	是否開啟背景圖模式

• 以下屬性可選

參數名稱	類型	取值	作用
httpHeaders	?	默認空	設置httpHeaders信息
withCredentials	?	默認false	是否使用cookie或授權標頭之類的憑據發出跨站點訪問
password	?	默認空	用于訪問有密碼的PDF
stopAtErrors	?	默認false	當無法成功解析關聯的PDF數據時，停止解析
disableFontFace	?	默認false	默認情況下，字體會轉換為OpenType字體，并通過字體規則來加載。如果禁用，字體將使用內置的字體渲染器渲染。
disableRange	?	默認false	禁用范圍請求加載PDF文件。啟用后，如果服務器支持部分內容請求，則將以塊的形式獲取PDF。
disableStream	?	默認false	禁用流式傳輸PDF文件數據。默認情況下，PDF.js嘗試加載成塊的PDF。
disableAutoFetch	?	默認false	禁用PDF文件數據的預取。啟用范圍請求后，即使不需要顯示當前頁面，PDF.js也會自動繼續獲取更多數據。默認值為“ false”。注意：還必須禁用流傳輸disableStream

pdf文件流請求示例（以jq ajax為例）

1. ?

$.ajax({url: "https://www.gjtool.cn/pdfh5/git.pdf", //假設這是pdf文件流的請求接口type: "get",mimeType: 'text/plain; charset=x-user-defined',//jq ajax請求文件流的方式success: function (data) {var pdfh5 = new Pdfh5('#demo', {data: data});}
});

1. ?

$.ajax({url: "https://www.gjtool.cn/pdfh5/git.pdf", //假設這是pdf文件流的請求接口type: "get",mimeType: 'text/plain; charset=x-user-defined',//jq ajax請求文件流的方式success: function (data) {var rawLength = data.length;var array = new Uint8Array(new ArrayBuffer(rawLength));for (i = 0; i < rawLength; i++) {array[i] = data.charCodeAt(i) & 0xff;}var pdfh5 = new Pdfh5('#demo', {data: array});}
});

1. ?

$.ajax({url: "https://www.gjtool.cn/pdfh5/git.pdf", //假設這是pdf文件流的請求接口type: "get",mimeType: 'text/plain; charset=x-user-defined',//jq ajax請求文件流的方式success: function (data) {var rawLength = data.length;var array = [];for (i = 0; i < rawLength; i++) {array.push(data.charCodeAt(i) & 0xff);}var pdfh5 = new Pdfh5('#demo', {data: array});}
});

1. axios示例

axios.get("https://www.gjtool.cn/pdfh5/git.pdf",{responseType:"arraybuffer"
}).then(res=>{this.pdfh5 = new Pdfh5('#demo', {data: res.data});
})

methods 方法列表

• 示例：?是否允許pdf滾動

pdfh5.scrollEnable(true) //允許pdf滾動
pdfh5.scrollEnable(false) //不允許pdf滾動

參數名稱	類型	取值	作用
scrollEnable	?	true、false， 默認true	是否允許pdf滾動(需要在pdf加載完成后使用)
zoomEnable	?	true、false， 默認true	是否允許pdf手勢縮放(需要在pdf加載完成后使用)
show	?	帶一個回調函數	pdfh5顯示
hide	?	帶一個回調函數	pdfh5隱藏
reset	?	帶一個回調函數	pdfh5還原
destroy	?	帶一個回調函數	pdfh5銷毀
on	{String, Function}	String：監聽的事件名，Function：監聽的事件回調	on方法監聽所有事件
goto	}	Number:要跳轉的pdf頁數	pdf跳轉到第幾頁（pdf加載完成后使用）

on方法監聽所有事件-事件名列表

• 示例：?監聽pdf準備開始渲染，此時可以拿到pdf總頁數

pdfh5.on("ready", function () {console.log("總頁數：" + this.totalNum)
})

參數名稱	回調	作用
init	?	監聽pdfh5開始初始化
ready	?	監聽pdf準備開始渲染，此時可以拿到pdf總頁數
error	{Function(msg,time))}	監聽加載失敗，msg信息，time耗時
success	{Function(msg,time))}	監聽pdf渲染成功，msg信息，time耗時
complete	{Function(status, msg, time)}	監聽pdf加載完成事件，加載失敗、渲染成功都會觸發。status有兩種狀態success和error
render	{Function(currentNum, time, currentPageDom)}	監聽pdf渲染過程，currentPageDom當前加載的pdf的dom,currentNum當前加載的pdf頁數,
zoom	{Function(scale)}	監聽pdf縮放，scale縮放比例
scroll	{Function(scrollTop)}	監聽pdf滾動，scrollTop滾動條高度
backTop	?	監聽回到頂部按鈕的點擊事件回調
zoomEnable	{Function(flag)}	監聽允許縮放，flag：true，false
scrollEnable	{Function(flag)}	監聽允許滾動，flag：true，false
show	?	監聽pdfh5顯示
hide	?	監聽pdfh5隱藏
reset	?	監聽pdfh5還原
destroy	?	監聽pdfh5銷毀

掃下面小程序碼，

總結

以上是生活随笔為你收集整理的pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。