最近遇到一個(gè)需求，一個(gè)古早的移動(dòng)端 juery 項(xiàng)目要求做一個(gè)頁(yè)面，從接口獲取 pdf 文件流，然后預(yù)覽出來(lái)

這里使用第三方工具：pdf.js

代碼如下：

// 引入相關(guān)文件<script src="../js/pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/pdfh5.js" type="text/javascript" charset="utf-8"></script>

// 轉(zhuǎn)化編碼格式
function converData(data) {data = data.replace(/[\n\r]/g, '');var raw = window.atob(data);var rawLength = raw.length;var array = new Uint8Array(new ArrayBuffer(rawLength));for (var i = 0; i < rawLength; i++) {array[i] = raw.charCodeAt(i)}return array
}// 點(diǎn)擊獲取當(dāng)前標(biāo)簽的 id 屬性值
$("#contain-wrapper").on("click", ".contain-main", function(e) {var id = $(this).attr("id")const params = {reportDocId: id}$.ajax({xhrFields: {withCredentials: true},crossDomain: true == !(document.all),type: 'POST', // 請(qǐng)求方式url: '接口地址', // 接口地址data: JSON.stringify(params), // 請(qǐng)求參數(shù)dataType: 'json', // 返回參數(shù)格式responseType: "blob", // 設(shè)置響應(yīng)類型cache: false,processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)contentType: 'application/json;charset=utf-8',success: function (data) {console.log(data);if(data.status != '0') {toast(data.message, 2000);} else {var pdfEntity = data.data; // 獲取文件流var array = converData(pdfEntity); // 轉(zhuǎn)碼成 base64$("#demo").show()var pdfh5 = new Pdfh5('#pdf-content', {data: array});// 監(jiān)聽(tīng)完成事件pdfh5.on("complete", function (status, msg, time) {// 處理插件不隱藏 loadEffect 的問(wèn)題$(".loadEffect").hide();})}},error: function () {toast('請(qǐng)求失敗', 2000);},complete: function() {isLoading = false;}})
})