pdf.js下載地址 http://mozilla.github.io/pdf.js/
建議翻牆下載，我用公司網下載不下來。
下載穩定版本，也可以使用cnd
此時，可以直接打開本地的pdf文件。
但是注意，pdf這類文件會跨域，所以必須放到服務器上纔可以預覽。
直接從本地打開web/viewer.html文件
放到服務器上就是http://mozilla.github.io/pdf.js/web/viewer.html，並不會報錯
此時我們需要解決的是將base64如何傳入這個插件中並在線展示
1.在web/viewer.html中添加代碼
<script type="text/javascript">
var DEFAULT_URL = "";
var pdfUrl = document.location.search.substring(1);
if (null == pdfUrl || "" == pdfUrl) {
var BASE64_MARKER = ';base64,'; //聲明文件流編碼格式
var preFileId = "";
var pdfAsDataUri = sessionStorage.getItem("_imgUrl"); //這裏就是pdf文件的base64碼，我是通過session傳遞base64的
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.substring(base64Index).replace(/[\n\r]/g, '');
var raw = window.atob(newUrl); //這個方法在ie內核下無法正常解析。
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>
注意：添加到pdf.js之前
這段代碼的意思是從session中讀取存入的base64編碼，然後展示
2.將讀取pdf文件的固定路徑修改爲傳入的變量
打開viewer.js，搜索defaultUrl替換爲變量
注意不同版本的修改方法不同，我使用的版本爲：pdfjs-2.2.228-dist
此時所要修改的插件內容全部修改完成，接下來我們把base64存入session中，並跳轉到viewer.html中
3.新增主頁面保存base64
代碼爲：
<!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">
<title>Document</title>
</head>
<body>
</body>
<script>
var PDFData
= "data:application/pdf;base64,*************";
sessionStorage.setItem("_imgUrl", PDFData);
// pageToUrl("./pdfjs/web/viewer",true);
window.location.href = './web/viewer.html'
</script>
</html>
注：*****爲獲取到的base64編碼
如圖，直接打開index.html
此時pdf的框架已經出現，但是字和內容沒有，查看報錯也是因爲獲取轉換字體文件時跨域報錯了，此時只需要把文件放到服務器上即可
如下圖所示
展示完成！
4.最後將寫死的base64編碼用接口獲取即可，這裏不再贅述。