本文章僅記錄本人在項目中，處理后臺傳來base64字段的pdf，并實現預覽，供大家參考。
本文參考：https://blog.csdn.net/Tastill/article/details/84572408
廢話不多說，直接進入主題。
一、首先下載整個pdf.js，下載地址：https://mozilla.github.io/pdf.js/
下載后解壓，并復制到項目靜態文件下，如圖（我把文件夾名稱更改為“pdfjs”）：
二、請求后臺數據，獲取后臺base64字段，并且保存到本地，然后跳轉到剛剛添加的pdf.js項目里的viewer.html
三、打開pdfjs/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>
<!-- 添加在viewer.js引用之前 -->
<script src="viewer.js"></script>
四、首先說明一點，我下載的版本是“pdfjs-2.0.943-dist”。
打開viewer.js，我這個版本直接搜索“DEFAULT_URL”會找不到（因為網上有個別帖子的版本是在viewer.js里搜到“DEFAULT_UR”并且要求注釋的），但是通過尋找，發現我這個版本的“DEFAULT_URL”已經放在“defaultOptions”對象里面，如下圖：
找到這個參數后，修改“defaultUrl”的value為“DEFAULT_URL”成下圖：
打開viewer.js.map，搜索defaultUrl，如圖：
修改為下圖：
五、在IE瀏覽器下，會報錯，說什么對象不支持replace屬性，這是什么原因呢？主要原因是：正常打開pdf是通過文件地址去獲取文件，而我們現在是直接打開流，所以viewer.js對這一現象沒有判斷?？磛iewer源碼：
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');
}*/
//當我們直接打開base64時，file是個對象，而不是string類型的url，所以此處我們需要判斷
if (file && typeof file =='string') {
var fileOrigin = new URL(file, window.location.href).origin;
}
} 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;
}
};
webViewerOpenFileViaURL = function webViewerOpenFileViaURL(file) {
//此處也沒有做判斷
if (file && typeof file=='string' && file.lastIndexOf('file:', 0) === 0) {
PDFViewerApplication.setTitleUsingUrl(file);
var xhr = new XMLHttpRequest();
xhr.onload = function () {
PDFViewerApplication.open(new Uint8Array(xhr.response));
};
try {
xhr.open('GET', file);
xhr.responseType = 'arraybuffer';
xhr.send();
} catch (e) {
PDFViewerApplication.error(mozL10n.get('loading_error', null, 'An error occurred while loading the PDF.'), e);
}
return;
}
六、有同學可能在項目跑起來后，標題可能自動添加“-”或者其他內容，我的效果，如圖：
解決方法：
打開“viewer.js”,搜索“document.title”，如圖：
修改成如下圖：
修改后效果如下：
最后，以上是本人在項目中遇到的問題，僅供參考。
