移动端浏览器 jquery 获取 pdf blob文件流 预览pdf

最近遇到一个需求,一个古早的移动端 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;
       }
   })
})
相关推荐
吞掉星星的鲸鱼33 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6636 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
hello_simon2 小时前
在线小白工具,PPT转PDF支持多种热门工具,支持批量转换,操作简单,高效适合各种需求
pdf·html·powerpoint·excel·pdf转html·excel转pdf格式
zhougl9963 小时前
html处理Base文件流
linux·前端·html
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_3 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之6 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端6 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡6 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript