上一篇降到通過file跳轉路徑，取後臺讀取pdf文件。
後來我們需要上傳pdf文件時支持預覽，因爲文件尚未傳到服務器，所以不存在取後臺取文件了，但是我們前端的小哥也沒有獲取選擇的文件的本地路徑，只拋給我一個base64碼，很尷尬。。。。。
去網上查閱了很多資料，很少有這方面的文章，遂記下來，以備以後用到。
我用的是pdf自帶的viewer.html頁面。
直接上代碼：
1、打開viewer.js，註釋掉：var DEFAULT_URL
2、打開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 = "";
var pdfAsDataUri = sessionStorage.getItem("_imgUrl");//這裏就是pdf文件的base64碼，我是通過session傳遞base64的
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
DEFAULT_URL = pdfAsArray;
function convertDataURIToBinary(dataURI) { //編碼轉換
var raw = window.atob(dataURI);//這個方法在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="../../static/project/js/pdf/viewer.js"></script>
3、調用方法如下：
var PDFData =_imgUrl.replace("data:application/pdf;base64,","");
sessionStorage.setItem("_imgUrl", PDFData);
pageToUrl("page/pdf/viewer",true);
4、效果如下：
在IE瀏覽器下，會報錯，說什麼對象不支持replace屬性，這是什麼原因呢？主要原因是：正常打開pdf是通過文件地址去獲取文件，而我們現在是直接打開流，所以viewer.js對這一現象沒有判斷。看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;
//跨域請求
/*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;
}
---------------------
作者：Tastill
來源：CSDN
原文：https://blog.csdn.net/Tastill/article/details/84572408
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！