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