1.插件下載地址：https://mozilla.github.io/pdf.js/

下載后解壓pdfjs-1.10.88-dist.zip文件后得到：

2.把pdfjs-1.10.88-dist放到項目靜態資源中，在自己的頁面中通過iframe鏈接到pdfjs-1.10.88-dist/web/viewer.html文件中。

3.訪問自己的頁面，默認就是本地文件的方式打開PDF文件，可自行指定viewer.js文件中

DEFAULT_URL的值為需要預覽的文件路徑，可以把下圖的代碼行注釋掉，到viewer.html中嵌入<script>標簽在里面重新定義該變量為需要預覽的本地文件。

4.Base64方式預覽

（1）界面定制：默認的viewer.html頁面功能太強大了，在手機端項目不需要，這里會提供快速的裁剪代碼。

先給出效果圖：

（2）你需要copy的代碼（完全不用修改，但是一定要把步驟3中的代碼行注釋掉！！）

在viewer.html文件中：

<script src="../build/pdf.js"></script>和<script src="viewer.js"></script>之間插入下面的代碼 <script src="../build/pdf.js"></script><script type="text/javascript">function getBase64Data() {// 優先從Session中獲取let key = "_base64DataStr";let result = sessionStorage.getItem(key);if (result)return result;return localStorage.getItem(key);// console.log(window.parent.name.length);// return window.parent.name;}// console.log(document.location.search);var BASE64_MARKER = ';base64,'; //聲明文件流編碼格式var preFileId = "";var pdfAsDataUri = getBase64Data(); //pdf文件的base64碼，通過session/local傳遞base64if (!pdfAsDataUri) {console.error("SessionStorage中沒有_base64DataStr對象");}// console.log(pdfAsDataUri);var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);DEFAULT_URL = pdfAsArray;//編碼轉換function convertDataURIToBinary(dataURI) {//[RFC2045]中有規定: Base64-行不能超過76字符，超過則添加回車換行符。因此需要把base64字段中的換行符，回車符給去掉。var base64Index = (dataURI + '').indexOf(BASE64_MARKER) + BASE64_MARKER.length;var newUrl = dataURI;newUrl = dataURI.substring(base64Index).replace(/[\n\r]/g, '');var raw = newUrl;try {raw = window.atob(newUrl); //這個方法在ie內核下無法正常解析。} catch (e) {console.error(e);}var rawLength = raw.length;//轉換成pdf.js能直接解析的Uint8Array類型var array = new Uint8Array(new ArrayBuffer(rawLength));for (i = 0; i < rawLength; i++) {array[i] = raw.charCodeAt(i) & 0xff;}return array;}</script><script src="viewer.js"></script>

（3）裁剪代碼（直接copy即可）

不要試圖去刪掉viewer.html中多余功能的html元素，因為在js文件中會根據這些元素綁定功能！！

在viewer.html中最下面的</body>前添加如下代碼：

<!--隱藏多余的交互元素--> <script type="text/javascript">let ids = ["sidebarToggle", "toolbarButtonSpacer", "toolbarViewerRight"];ids.forEach(value => {let dom = document.getElementById(value);if (dom) {dom.style.display = "none";}})let scales = document.getElementsByClassName("splitToolbarButton");if (scales && scales.length >= 4) {scales[3].style.marginLeft = "-80px";} </script>

（4）你需要準備的就是在預覽前，往你的sessionStorage或者localStorage中存入PDF文件的base64編碼，鍵為代碼中的_base64DataStr，如：data:application/pdf;base64,JVBERi0xLjcKJcKzx9gNCjEgMCBvYmoNPDwv......

?

5.遠程URL跨域方式

5.1 先說本地pdf文件訪問的另一種比較方便的訪問形式：url傳參

假設你的插件存放在assets目錄中，則也可通過url的方式瀏覽本地PDF文件（前面所有改動撤銷，功能隱藏的裁剪代碼隨意） 支持相對路勁，如果路徑有中文或特殊字符需要轉碼，推薦使用encodeURIComponent()方法。 iframe的src="assets/pdfjs-1.10.88-dist/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf" 不使用iframe方式也可以直接通過瀏覽器地址欄訪問，前面帶上域名，支持相對路徑！！

5.2?如果服務端支持訪問pdf文件返回文件流的，上面的file參數可指向文件流接口，如：

http://hocalhost:8100/assets/pdfjs-1.10.88-dist/web/viewer.html?file=encodeURIComponent(文件流接口訪問URL)

tip1：文件流是普通的輸出流，并非文件的base64編碼！！

tip2：如果viewer.html跟訪問文件接口url不在同一個服務器上會出現跨域問題，按下圖所示修改viewer.js來解決跨域問題（注釋掉紅色框部分的代碼即可）：

?

END：陸陸續續參考了很多博客，就不一一列舉了，Thanks a lot!

總結

以上是生活随笔為你收集整理的使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式）的全部內容，希望文章能夠幫你解決所遇到的問題。

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