為什么80%的碼農都做不了架構師？>>> ??

1.簡介

PDF.js 是基于開放的 HTML5 及 JavaScript 技術實現的開源產品。

pdf.js 是一個主要用于HTML5 平臺上在線閱讀PDF文檔的小插件，基于JavaScript技術編寫而成，無需任何本地技術支持。

pdf.js是由Mozilla Labs發布的。他們的目標是創建一個通用的，基于標準的網絡平臺，能夠解析和渲染PDF文件

2.下載

$ git clone git://github.com/mozilla/pdf.js.git

3.構建

pdf.js 構建基于nodejs,因此需要安裝nodejs。

安裝nodejs后使用npm命令依次安裝下列程序

• npm install -g gulp-cli
• npm install

在命令行輸入gulp generic進行構建。

構建完成后將build\generic下的文件部署到web服務器上。 url訪問到web/viwer.html即可瀏覽在線pdf.

viewer.html提供一個file參數，用于傳入瀏覽的pdf的url.

4.注意

1.如果web服務器是iis，請添加.properties的MIME類型為application/octet-stream， 否則本地化無法啟用，默認語言為英文。

2.pdf.js是不支持跨域文件加載的，比如你的頁面地址為http://www.a.com, pdf地址為：http://www.b.com/my.pdf。 直接加載是不會成功的。會報? “file origin does not match viewer”錯誤。

分析一下源碼：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

var validateFileURL; ?? var HOSTED_VIEWER_ORIGINS = [ ????'null', ????'http://mozilla.github.io', ????'https://mozilla.github.io' ?? ]; ?? validateFileURL = function validateFileURL(file) { ????try { ???? var viewerOrigin = new URL(window.location.href).origin || 'null'; ???? if (HOSTED_VIEWER_ORIGINS.indexOf(viewerOrigin) >= 0) { ??????return; ???? } ???? var fileOrigin = new URL(file, window.location.href).origin; ???? if (fileOrigin !== viewerOrigin) { ??????throw new Error('file origin does not match viewer\'s'); ???? } ????} catch (e) { ???? var message = e && e.message; ???? var loadingErrorMessage = mozL10n.get('loading_error', null, 'An error occurred while loading the PDF.'); ???? var moreInfo = { message: message }; ???? PDFViewerApplication.error(loadingErrorMessage, moreInfo); ???? throw e; ????} ?? };

首先，如果Viewer.html所在的主機是否在HOSTED_VIEWER_ORIGINS列表中定義，如果定義，則以下不檢查同源。如果不存在，則檢查同源。因此可以在將viewer.html所在的主機加到HOSTED_VIEWER_ORIGINS中即可實現跨域。 ?這樣做比較安全。

如果部署覺得麻煩，暫不考慮安全性的話，可以在開頭設置一個跨域標識位：

?

1 2 3

if(!CORS){ ????????validateFileURL(file); ????}

var CORS = true;表示支持跨域，不進行同源判斷。

var CORS = true;表示不支持跨域，進行同源檢測。

3.file參數中默認只允許傳簡單路徑比如：http://www.a.com/file.php. ? 如果你要瀏覽的pdf路徑為http://www.a.com/file.php?id=2001。 這時候直接傳入的話會解析出錯， 因為pdf.js無法判斷id=2001是viewer.html的參數呢還是file.php的參數。

這時候我們要把參數file后傳入的動態參數中特殊字符轉義：

+	URL 中+號表示空格	%2B
空格	URL中的空格可以用+號或者編碼	%20
/	分隔目錄和子目錄	? %2F
?	分隔實際的URL和參數	%3F
%	指定特殊字符	%25
#	表示書簽	%23
&	URL 中指定的參數間的分隔符	%26
=	URL 中指定參數的值	%3D

轉載于:https://my.oschina.net/glenxu/blog/1574043

總結

以上是生活随笔為你收集整理的pdf.js 在线浏览pdf组件构建与安装注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

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