苏州建设网站平台4414站长平台

最近遇到一个需求，一个古早的移动端 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;}})
})