html頁面預覽pdf文件使用插件pdfh5.js
html預覽pdf文件需要依賴pdf.js
移動端適配需要pdfh5.js
記錄移動端適配pdfh5.js的用發
在線預覽： //www.gjtool.cn/pdfh5/pdf.html?file=//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 |
{String} |
– |
√ |
pdfh5的容器選擇器 |
| options |
{Object} |
– |
× |
pdfh5的配置項參數 |
- options配置項參數列表
- 示例： 配置項參數 lazy:true 開啟懶載入，默認是false,不開啟懶載入
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf",
lazy:true
});
| 參數名稱 |
類型 |
取值 |
作用 |
| pdfurl |
{String} |
– |
pdf地址 |
| URIenable |
{Boolean} |
true、false，默認false |
true開啟地址欄file參數 |
| data |
{String(blob) |
– |
pdf文件流 ，與pdfurl二選一 |
| renderType |
{String} |
“canvas”、”svg”，默認”canvas” |
pdf渲染模式 |
| lazy |
{Boolean} |
true、false， |
默認false |
| maxZoom |
{Number} |
默認3 |
手勢縮放最大倍數 |
| scrollEnable |
{Boolean} |
true、false， 默認true |
是否允許pdf滾動 |
| zoomEnable |
{Boolean} |
true、false， 默認true |
是否允許pdf手勢縮放 |
| cMapUrl |
{String} |
默認”//www.gjtool.cn/cmaps/“ |
解析pdf時，特殊情況下顯示完整字體的cmaps文件夾路徑，例如 cMapUrl:”//unpkg.com/ |
| limit |
{Number} |
默認0 |
限制pdf載入最大頁數 |
- pdf文件流請求示例（以jq ajax為例）
$.ajax({
url: "//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: "//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: "//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 方法列表
pdfh5.scrollEnable(true) //允許pdf滾動
pdfh5.scrollEnable(false) //不允許pdf滾動
| 參數名稱 |
類型 |
取值 |
作用 |
| scrollEnable |
{Boolean} |
true、false， 默認true |
是否允許pdf滾動(需要在pdf載入完成後使用) |
| zoomEnable |
{Boolean} |
true、false， 默認true |
是否允許pdf手勢縮放(需要在pdf載入完成後使用) |
| show |
{Function} |
帶一個回調函數參數 |
pdfh5顯示 |
| hide |
{Function} |
帶一個回調函數參數 |
pdfh5隱藏 |
| reset |
{Function} |
帶一個回調函數參數 |
pdfh5還原 |
| destroy |
{Function} |
帶一個回調函數參數 |
pdfh5銷毀 |
| on |
{String, Function} |
String：監聽的事件名，Function：監聽的事件回調 |
on方法監聽所有事件 |
- on方法監聽所有事件-事件名列表
- 示例： 監聽pdf準備開始渲染，此時可以拿到pdf總頁數
pdfh5.on("ready", function () {
console.log("總頁數：" + this.totalNum)
})
| 參數名稱 |
回調 |
作用 |
| init |
{Function} |
監聽pdfh5開始初始化 |
| ready |
{Function} |
監聽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 |
{Function} |
監聽回到頂部按鈕的點擊事件回調 |
| zoomEnable |
{Function(flag)} |
監聽允許縮放，flag：true，false |
| scrollEnable |
{Function(flag)} |
監聽允許滾動，flag：true，false |
| show |
{Function} |
監聽pdfh5顯示 |
| hide |
{Function} |
監聽pdfh5隱藏 |
| reset |
{Function} |
監聽pdfh5還原 |
| destroy |
{Function} |
監聽pdfh5銷毀 |
html預覽pdf文件需要依賴pdf.js
移動端適配需要pdfh5.js
記錄移動端適配pdfh5.js的用發
在線預覽： //www.gjtool.cn/pdfh5/pdf.html?file=//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 |
{String} |
– |
√ |
pdfh5的容器選擇器 |
| options |
{Object} |
– |
× |
pdfh5的配置項參數 |
- options配置項參數列表
- 示例： 配置項參數 lazy:true 開啟懶載入，默認是false,不開啟懶載入
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf",
lazy:true
});
| 參數名稱 |
類型 |
取值 |
作用 |
| pdfurl |
{String} |
– |
pdf地址 |
| URIenable |
{Boolean} |
true、false，默認false |
true開啟地址欄file參數 |
| data |
{String(blob) |
– |
pdf文件流 ，與pdfurl二選一 |
| renderType |
{String} |
“canvas”、”svg”，默認”canvas” |
pdf渲染模式 |
| lazy |
{Boolean} |
true、false， |
默認false |
| maxZoom |
{Number} |
默認3 |
手勢縮放最大倍數 |
| scrollEnable |
{Boolean} |
true、false， 默認true |
是否允許pdf滾動 |
| zoomEnable |
{Boolean} |
true、false， 默認true |
是否允許pdf手勢縮放 |
| cMapUrl |
{String} |
默認”//www.gjtool.cn/cmaps/“ |
解析pdf時，特殊情況下顯示完整字體的cmaps文件夾路徑，例如 cMapUrl:”//unpkg.com/ |
| limit |
{Number} |
默認0 |
限制pdf載入最大頁數 |
- pdf文件流請求示例（以jq ajax為例）
$.ajax({
url: "//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: "//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: "//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 方法列表
pdfh5.scrollEnable(true) //允許pdf滾動
pdfh5.scrollEnable(false) //不允許pdf滾動
| 參數名稱 |
類型 |
取值 |
作用 |
| scrollEnable |
{Boolean} |
true、false， 默認true |
是否允許pdf滾動(需要在pdf載入完成後使用) |
| zoomEnable |
{Boolean} |
true、false， 默認true |
是否允許pdf手勢縮放(需要在pdf載入完成後使用) |
| show |
{Function} |
帶一個回調函數參數 |
pdfh5顯示 |
| hide |
{Function} |
帶一個回調函數參數 |
pdfh5隱藏 |
| reset |
{Function} |
帶一個回調函數參數 |
pdfh5還原 |
| destroy |
{Function} |
帶一個回調函數參數 |
pdfh5銷毀 |
| on |
{String, Function} |
String：監聽的事件名，Function：監聽的事件回調 |
on方法監聽所有事件 |
- on方法監聽所有事件-事件名列表
- 示例： 監聽pdf準備開始渲染，此時可以拿到pdf總頁數
pdfh5.on("ready", function () {
console.log("總頁數：" + this.totalNum)
})
| 參數名稱 |
回調 |
作用 |
| init |
{Function} |
監聽pdfh5開始初始化 |
| ready |
{Function} |
監聽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 |
{Function} |
監聽回到頂部按鈕的點擊事件回調 |
| zoomEnable |
{Function(flag)} |
監聽允許縮放，flag：true，false |
| scrollEnable |
{Function(flag)} |
監聽允許滾動，flag：true，false |
| show |
{Function} |
監聽pdfh5顯示 |
| hide |
{Function} |
監聽pdfh5隱藏 |
| reset |
{Function} |
監聽pdfh5還原 |
| destroy |
{Function} |
監聽pdfh5銷毀 |
| ————恢復內容結束———— |
|
|
