pdfh5.js 基於pdf.js和jQuery，移動端PDF預覽插件，可手勢縮放，支持懶加載

• pdfh5.js 基於pdf.js和jQuery，移動端PDF預覽插件，可手勢縮放，支持懶加載（即分段加載）。

• pdfh5.js開源項目地址

• 前端學習交流QQ羣，651601340，可以進來提pdfh5.js的bug、問題、建議等。

更新信息

• 2019.08.06 更新： 1.renderType:"canvas"模式下也可以懶加載了。2.在沒有渲染完成時也可以手勢縮放（即在懶加載時也可以手勢縮放）。

• 2019.08.01更新：新增配置項參數type,可以在實例化的時候選擇請求方式。默認是type:“fetch”,可以更改爲type:“ajax”。在某些情況下，pdf.js自帶的fetch請求方式會耗時非常嚴重，所以增加ajax請求方式來給使用者多樣化的選擇。

• 2019.07.29 更新： 新增配置項參數renderType，可以在實例化的時候選擇渲染模式。默認是renderType:“svg”,可以更改爲renderType:“canvas”。
  新增這個參數是因爲pdf.js有個bug，當渲染模式爲svg的時候，pdf的電子簽章（即紅色印章）無法顯示。只有渲染模式爲canvas的時候纔可以顯示。不過canvas模式下，內存佔用大，清晰度也不如svg。選擇哪種渲染模式請使用者自行選擇。當renderType:"canvas"時，懶加載無效。

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

• http http://www.gjtool.cn/pdfh5/pdf.html?file=http://www.gjtool.cn/pdfh5/default.pdf

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

快速使用

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

• 1.引入css

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

• 2.創建div

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

• 3.依次引入js

<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-1.11.3.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）

• 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: "./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>

API接口方法

• 注意： pdf路徑地址用相對路徑加載速度最快，網絡地址比較慢，本地絕對路徑地址不能加載。
• 注意： pdf路徑地址用相對路徑加載速度最快，網絡地址比較慢，本地絕對路徑地址不能加載。
• 注意： pdf路徑地址用相對路徑加載速度最快，網絡地址比較慢，本地絕對路徑地址不能加載。

實例化

• pdfh5實例化的時候傳兩個參數，selector選擇器，options配置項參數，options可以不填寫，會自動獲取瀏覽器地址欄？file=後面的地址

new Pdfh5(selector, options);

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

options配置項參數列表

• 示例： 配置項參數 lazy:true 開啓懶加載，默認是false,不開啓懶加載

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

參數名稱	類型	取值	作用
pdfurl	{String}	-	pdf地址，當前默認優先獲取瀏覽器地址欄？file=後面的地址，如果地址欄沒有，再拿配置項的pdfurl或者data來渲染pdf，優先順序： ？file= > pdfurl > data
URIenable	{Boolean}	true、false， 默認true	可以無視地址欄參數，只拿配置項的pdfurl或者data來渲染pdf
data	{Array(Uint8Array)}	-	pdf文件流 ，與pdfurl二選一
type	{String}	“ajax”、“fetch”，默認"fetch"	請求pdf方式
renderType	{String}	“canvas”、“svg”，默認"svg"	pdf渲染模式
scale	{Number}	默認1.3	渲染的清晰度比例
lazy	{Boolean}	true、false， 默認false	是否開啓懶加載
maxZoom	{Number}	默認4	手勢縮放最大倍數
tapZoomFactor	{Number}	默認2	雙擊放大倍數
scrollEnable	{Boolean}	true、false， 默認true	是否允許pdf滾動
zoomEnable	{Boolean}	true、false， 默認true	是否允許pdf手勢縮放

methods 方法列表

• 示例： 是否允許pdf滾動

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

參數名稱	類型	取值	作用
scrollEnable	{Boolean}	true、false， 默認true	是否允許pdf滾動
zoomEnable	{Boolean}	true、false， 默認true	是否允許pdf手勢縮放
show	{Fuction}	帶一個回調函數參數	pdfh5顯示
hide	{Fuction}	帶一個回調函數參數	pdfh5隱藏
reset	{Fuction}	帶一個回調函數參數	pdfh5還原
destroy	{Fuction}	帶一個回調函數參數	pdfh5銷燬
on	{String, Fuction}	String：監聽的事件名，Fuction：監聽的事件回調	on方法監聽所有事件

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

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

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

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