html頁面預覽pdf文件使用插件pdfh5.js

本文轉載自查看原文 2022-02-22 14:56 3400 前端坑

html預覽pdf文件需要依賴pdf.js

移動端適配需要pdfh5.js

記錄移動端適配pdfh5.js的用發

在線預覽： https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf

引入css
<link rel="stylesheet" href="css/pdfh5.css" />
創建div
<div id="demo"></div>
依次引入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-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>

實例化：

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

實例化參數 var pdfh5 = new Pdfh5(selector, options);

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

options配置項參數列表

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

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

參數名稱	類型	取值	作用
pdfurl		-	pdf地址
URIenable		true、false，默認false	true開啟地址欄file參數
data	{String(blob)	-	pdf文件流，與pdfurl二選一
renderType		"canvas"、"svg"，默認"canvas"	pdf渲染模式
lazy		true、false，	默認false
maxZoom		默認3	手勢縮放最大倍數
scrollEnable		true、false，默認true	是否允許pdf滾動
zoomEnable		true、false，默認true	是否允許pdf手勢縮放
cMapUrl		默認"https://www.gjtool.cn/cmaps/"	解析pdf時，特殊情況下顯示完整字體的cmaps文件夾路徑，例如 cMapUrl:"https://unpkg.com/
limit		默認0	限制pdf加載最大頁數

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

$.ajax({
  url: "https://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
  	});
  }
});

$.ajax({
	url: "https://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
		});
	}
});

$.ajax({
	url: "https://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
		});
	}
});

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：監聽的事件回調	on方法監聽所有事件

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

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

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

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

html預覽pdf文件需要依賴pdf.js

移動端適配需要pdfh5.js

記錄移動端適配pdfh5.js的用發

在線預覽： https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf

引入css
<link rel="stylesheet" href="css/pdfh5.css" />
創建div
<div id="demo"></div>
依次引入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-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>

實例化：

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

實例化參數 var pdfh5 = new Pdfh5(selector, options);

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

options配置項參數列表

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

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

參數名稱	類型	取值	作用
pdfurl		-	pdf地址
URIenable		true、false，默認false	true開啟地址欄file參數
data	{String(blob)	-	pdf文件流，與pdfurl二選一
renderType		"canvas"、"svg"，默認"canvas"	pdf渲染模式
lazy		true、false，	默認false
maxZoom		默認3	手勢縮放最大倍數
scrollEnable		true、false，默認true	是否允許pdf滾動
zoomEnable		true、false，默認true	是否允許pdf手勢縮放
cMapUrl		默認"https://www.gjtool.cn/cmaps/"	解析pdf時，特殊情況下顯示完整字體的cmaps文件夾路徑，例如 cMapUrl:"https://unpkg.com/
limit		默認0	限制pdf加載最大頁數

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

$.ajax({
  url: "https://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
  	});
  }
});

$.ajax({
	url: "https://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
		});
	}
});

$.ajax({
	url: "https://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
		});
	}
});

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：監聽的事件回調	on方法監聽所有事件

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

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

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

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js+html預覽PDF Jquery Media插件使用，解決在線預覽及打開PDF文件 vue文件流轉換成pdf預覽(pdf.js+iframe)&&使用vue-pdf實現pdf預覽使用PDF.JS實現pdf文件在線預覽時，報文件被損壞的錯誤 uni-app PDF預覽插件如何展示本地PDF文件 spring boot + pdf.js 實現pdf文件預覽 fis3+vue+pdf.js制作預覽PDF文件或其他【轉】前端預覽 PDF 文件（使用PDFJS） vue中使用 vue-pdf 實現PDF文件預覽 nuxt使用pdfjs-dist插件實現pdf預覽