基于HTML5 構建的 Web端現代化PDF在線預覽插件-PDF.js

言

PDF文件現在在許多企業中常用 - 無論您是要生成銷售報告，交付合同還是發送發票，PDF都是首選的文件類型。PDF.js是由Mozilla編寫的JavaScript庫。由于它使用vanilla JavaScript實現PDF渲染，因此它具有跨瀏覽器兼容性，并且不需要安裝其他插件。在使用PDFJS之前你也可以先了解下原生的PDF<object>對象，本文僅介紹PDFJS。

官網地址

https://mozilla.github.io/pdf.js/

下載和安裝

官網提供了下載入口,有穩定版和Beta版,我們要在生產環境下使用建議使用穩定版,官網給我們提供了三種獲取PDF.js的方式

使用說明

我們可以直接使用cdn服務，也可以將下載的文件引入，我們看一下示例代碼，這里我提供了兩種寫法，在項目運行之前，請確保你的同級目錄下有一個test.pdf文件

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
 <script src='./index.js'></script>
 <title>PDF</title>
</head>
<body>
 <canvas id="pdf"></canvas>
</body>
</html>
//index.js
// var loadingTask = pdfjsLib.getDocument("test.pdf");
// loadingTask.promise.then(
// function(pdf) {
// // 加載第一頁
// pdf.getPage(1).then(function(page) {
// var scale = 1;
// var viewport = page.getViewport(scale);
// //應用到頁面的canvas上.
// var canvas = document.getElementById("pdf");
// var context = canvas.getContext("2d");
// canvas.height = viewport.height;
// canvas.width = viewport.width;
// // 渲染canvas.
// var renderContext = {
// canvasContext: context,
// viewport: viewport
// };
// page.render(renderContext).then(function() {
// console.log("Page rendered!");
// });
// });
// },
// function(reason) {
// console.error(reason);
// }
// );
// index.js
(async () => {
 const loadingTask = pdfjsLib.getDocument("test.pdf");
 const pdf = await loadingTask.promise;
 // 加載第一頁.
 const page = await pdf.getPage(1);
 const scale = 1;
 const viewport = page.getViewport(scale);
 // 應用到頁面的canvas上.
 const canvas = document.getElementById("pdf");
 const context = canvas.getContext("2d");
 canvas.height = viewport.height;
 canvas.width = viewport.width;
 // 渲染canvas.
 const renderContext = {
 canvasContext: context,
 viewport: viewport
 };
 await page.render(renderContext);
})();

當我們運行項目之后，打開瀏覽器查看，它已經將pdf的內容渲染到了瀏覽器中，且顯示了第一頁，如下圖所示：

如果就這樣的話遠遠是無法滿足我們使用的，因此我們來看一下它比較高級的用法，或者說簡單的用法，高級的功能。

使用iframe

首先我們將我們下載的js包加壓，復制里面的web文件夾，粘貼到你的項目目錄

然后修改你的index.html代碼，首先注釋掉之前引入的js代碼，然后修改body，如下

<body>
 <iframe src="test.pdf" style="border: none;" width="100%" height='1000px'></iframe>
</body>

隨后打開我們的瀏覽器，你會發現一個預覽的窗口

它繼承了我們常用的功能，比如旋轉、下載、打印、自適應縮放、放大、縮小等，我們只需要使用iframe引入我們的pdf文件即可，其余的全部交給pdf來完成，即可獲得一個實現一個完整的pdf預覽功能。

PDF.js三個不同層

核心 - PDF的二進制格式在此層中進行解釋。直接使用該層被認為是高級用法。
顯示 - 該層構建在核心層之上，為大多數日常工作提供易于使用的界面。
Viewer - 除了提供編程API之外，PDF.js還附帶一個現成的用戶界面，其中包括對搜索，旋轉，縮略圖側邊欄和許多其他內容的支持。

PDFJS的這三層分開，讓我們很好的來根據業務需求來實現我們想要的部分，其簡單的api讓我們得心應手，總而言之，PDFJS是一個絕佳的PDF預覽解決方案。

總結

PDFJS不僅僅支持pdf的二進制文件，同樣還支持base64編碼的pdf，如果在你的項目中需要用到pdf的預覽等功能，無疑它是一種良好的解決方案，當然想要實現相同的功能有許多辦法，我們可以選擇最適合我們需求的，官方還提供了一個完整的演示Demo，如下截圖，如果你覺得本文對你有幫助，請麻煩轉發、點贊加關注吧，后續會分享更多實用有趣的技術！

例簡介

本例分享實現PDF的預覽和下載功能，預覽分兩種方法。

功能實現

1、利用a標簽實現預覽和下載功能

對于需求要求不高是比較方便的方法，因為預覽功能在部分手機端是下載效果，代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>預覽下載PDF</title>
</head>

<body>
  <a href="./test.pdf" target="_blank">預覽</a>
  <a href="./test.pdf" download="test" target="_blank">下載</a>
</body>

</html>

2、利用pdf.js組件實現預覽功能

對于需求要求比較高可以利用pdf.js組件，可以兼容不同手機端同樣的預覽效果，代碼如下：

1、必須部署后才能正常使用預覽功能；

2、fileUrl為預覽文件地址，如果非“pdfjs/web”下的文件，需要使用部署路徑，如代碼。


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>預覽下載PDF</title>
</head>

<body>
  <a href="javascript：;" onclick="previewPdf()">預覽</a>
  <script>
  function previewPdf() {
    var fileUrl = '/study/js/previewPDF/test.pdf';
    window.open('./pdfjs/web/viewer.html?file=' + fileUrl);
  }
</script>
</body>

</html>

Tips：

pdf.js下載地址：http://mozilla.github.io/pdf.js/getting_started/#download；

目錄架構如下圖：

、前端實現pdf文件在線預覽功能

方式一、pdf文件理論上可以在瀏覽器直接打開預覽但是需要打開新頁面。在僅僅是預覽pdf文件且UI要求不高的情況下可以直接通過a標簽href屬性實現預覽

<a href="文檔地址"></a>

方式二、通過jquery插件jquery.media.js實現這個插件可以實現pdf預覽功能（包括其他各種媒體文件）但是對word等類型的文件無能為力。實現方式： js代碼：

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.media.js"></script>
復制代碼

html結構：

 <body>
 <div id="handout_wrap_inner"></div>
 </body>
復制代碼

調用方式：

<script type="text/javascript"> 
 $('#handout_wrap_inner').media({
		width: '100%',
		height: '100%',
		autoplay: true,
 src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
 }); 
</script>
復制代碼

方式三、直接通過頁面內嵌iframe

$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview"));
復制代碼

此外還可以在iframe標簽之間提供一個提示類似這樣

<iframe :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</iframe>
復制代碼

方式四、通過標簽嵌入內容

<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">

此標簽h5特性中包含四個屬性：高、寬、類型、預覽文件src！與< iframe > < / iframe > 不同，這個標簽是自閉合的的，也就是說如果瀏覽器不支持PDF的嵌入，那么這個標簽的內容什么都看不到！

方式五、標簽和iframe使用差別較小

<object :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</object>
復制代碼

除方式二以外其他都是直接通過標簽將內容引入頁面實現預覽

方式六、PDFObject

PDFObject實際上也是通過標簽實現的直接上代碼

<!DOCTYPE html>
<html>
<head>
 <title>Show PDF</title>
 <meta charset="utf-8" />
 <script type="text/javascript" src='pdfobject.min.js'></script>
 <style type="text/css">
 html,body,#pdf_viewer{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 }
 </style>
</head>
<body>
 <div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
 if(PDFObject.supportsPDFs){
 // PDF嵌入到網頁
 PDFObject.embed("index.pdf", "#pdf_viewer" );
 } else {
 location.href = "/canvas";
 }
</script>
</html>

還可以通過以下代碼進行判斷是否支持PDFObject預覽

if(PDFObject.supportsPDFs){
 console.log("Yay, this browser supports inline PDFs.");
} else {
 console.log("Boo, inline PDFs are not supported by this browser");
}
復制代碼

方式七、PDF.js

PDF.js可以實現在html下直接瀏覽pdf文檔，是一款開源的pdf文檔讀取解析插件，非常強大，能將PDF文件渲染成Canvas。PDF.js主要包含兩個庫文件，一個pdf.js和一個pdf.worker.js，一個負責API解析，一個負責核心解析。

2、word、xls、ppt文件在線預覽功能

word、ppt、xls文件實現在線預覽的方式比較簡單可以直接通過調用微軟的在線預覽功能實現 (預覽前提：資源必須是公共可訪問的)

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'>
			</iframe>
復制代碼

src就是要實現預覽的文件地址具體文檔看這微軟接口文檔

補充：google的文檔在線預覽實現同微軟（資源必須是公共可訪問的）

<iframe :src="'https://docs.google.com/viewer?url="fileurl"></iframe>
復制代碼

3、word文件

XDOC可以實現預覽以DataURI表示的DOC文檔，此外XDOC還可以實現文本、帶參數文本、html文本、json文本、公文等在線預覽，具體實現方法請看官方文檔

下面這種方式可以實現快速預覽word但是對文件使用的編輯器可能會有一些限制

<a  target="_blank" rel="nofollow">XDOC</a>
復制代碼

4、excel文件

目前excel文件已經有了類似pdf.js那樣的解析sheet.js

總結：

1、免費純前端方式實現在線預覽word、excel、ppt最優選擇微軟在線預覽（不可編輯）

2、利用后端將文件轉為圖片，前端以圖片形式預覽（可行方案）

3、購買在線預覽服務例如百度DOC文檔服務、永中、I DOC VIEW等

著名：文章內容是從網上搜集資料所得；在次發表只為自己以及頭條程序員兄弟日后使用圖個方便。

覺得有用記得收藏轉發！

在線咨詢

上一篇：HTML背景色教程–如何更改Div背景色，并通過代碼示例進行了說明
下一篇：html常用代碼大全

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商