最近遇到一個需求，一個古早的移動端 juery 項目要求做一個頁面，從接口獲取 pdf 文件流，然后預覽出來

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

代碼如下：

// 引入相關文件<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>

// 轉化編碼格式
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
}// 點擊獲取當前標簽的 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', // 請求方式url: '接口地址', // 接口地址data: JSON.stringify(params), // 請求參數dataType: 'json', // 返回參數格式responseType: "blob", // 設置響應類型cache: false,processData: false, // 告訴jQuery不要去處理發送的數據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); // 轉碼成 base64$("#demo").show()var pdfh5 = new Pdfh5('#pdf-content', {data: array});// 監聽完成事件pdfh5.on("complete", function (status, msg, time) {// 處理插件不隱藏 loadEffect 的問題$(".loadEffect").hide();})}},error: function () {toast('請求失敗', 2000);},complete: function() {isLoading = false;}})
})