本文章僅記錄本人在項(xiàng)目中，處理后臺(tái)傳來(lái)base64字段的pdf逐抑，并實(shí)現(xiàn)預(yù)覽屹蚊，供大家參考。
本文參考：https://blog.csdn.net/Tastill/article/details/84572408
廢話不多說(shuō)，直接進(jìn)入主題胃惜。
一利虫、首先下載整個(gè)pdf.js硼讽，下載地址：https://mozilla.github.io/pdf.js/
下載后解壓，并復(fù)制到項(xiàng)目靜態(tài)文件下，如圖（我把文件夾名稱更改為“pdfjs”）：
二、請(qǐng)求后臺(tái)數(shù)據(jù)，獲取后臺(tái)base64字段，并且保存到本地炉峰，然后跳轉(zhuǎn)到剛剛添加的pdf.js項(xiàng)目里的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碼蜻直，我是通過(guò)session傳遞base64的
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
DEFAULT_URL = pdfAsArray;
//編碼轉(zhuǎn)換
function convertDataURIToBinary(dataURI) {
//[RFC2045]中有規(guī)定：Base64一行不能超過(guò)76字符餐曼，超過(guò)則添加回車換行符。因此需要把base64字段中的換行符，回車符給去掉。
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var newUrl = dataURI.substring(base64Index).replace(/[\n\r]/g,'');
var raw = window.atob(newUrl);//這個(gè)方法在ie內(nèi)核下無(wú)法正常解析中捆。
var rawLength = raw.length;
//轉(zhuǎn)換成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>
四痘绎、首先說(shuō)明一點(diǎn)，我下載的版本是“pdfjs-2.0.943-dist”。
打開viewer.js鲜结，我這個(gè)版本直接搜索“DEFAULT_URL”會(huì)找不到（因?yàn)榫W(wǎng)上有個(gè)別帖子的版本是在viewer.js里搜到“DEFAULT_UR”并且要求注釋的），但是通過(guò)尋找咖杂，發(fā)現(xiàn)我這個(gè)版本的“DEFAULT_URL”已經(jīng)放在“defaultOptions”對(duì)象里面伍绳，如下圖：
找到這個(gè)參數(shù)后忍疾，修改“defaultUrl”的value為“DEFAULT_URL”成下圖：
打開viewer.js.map洗出，搜索defaultUrl菠镇，如圖：
修改為下圖：
五捻脖、在IE瀏覽器下，會(huì)報(bào)錯(cuò)蛮位，說(shuō)什么對(duì)象不支持replace屬性在抛，這是什么原因呢缘回？主要原因是：正常打開pdf是通過(guò)文件地址去獲取文件授滓，而我們現(xiàn)在是直接打開流仔燕，所以viewer.js對(duì)這一現(xiàn)象沒有判斷吁讨∷┣看viewer源碼：
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;
//跨域請(qǐng)求
/*if (fileOrigin !== viewerOrigin) {
throw new Error('file origin does not match viewer\'s');
}*/
//當(dāng)我們直接打開base64時(shí)，file是個(gè)對(duì)象，而不是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;
}
六阎肝、有同學(xué)可能在項(xiàng)目跑起來(lái)后眼刃，標(biāo)題可能自動(dòng)添加“-”或者其他內(nèi)容肯适，我的效果雨饺，如圖：
解決方法：
打開“viewer.js”,搜索“document.title”刁赖，如圖：
修改成如下圖：
修改后效果如下：
最后源请，以上是本人在項(xiàng)目中遇到的問(wèn)題谁尸，僅供參考症汹。
