zoukankan      html  css  js  c++  java
  • JavaScript处理后端返回PDF文件流,在线预览下载PDF文件

    在实际开发业务中,遇到这一需求,即后端返回的pdf文件,是以base64文件流的方式,在此不便操作接口响应等操作,便以上传一个文件转化为文件流的形式模拟
    实际应用时,base64Img = res.data 即可,以下方法为不使用其他插件可快速实现文件流转pdf,在线预览和下载,如需pdf文件流转图片预览且不可下载
    请参考此篇随笔 pdf.js文件流转图片

    <%input type="file" name="" id="imgfile">
    
    <script>    
        var base64Img = ''; // 响应数据
        document.getElementById('imgfile').onchange = function () {
          var fileReader = new FileReader();
          fileReader.readAsDataURL(this.files[0]);
          fileReader.onload = function () {
            base64Img = fileReader.result;
            showAgreementBook(base64Img)
          }
        }
        // base64文件流转为blob
        function dataURItoBlob(base64Data) {
          var byteString;
          if (base64Data.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(base64Data.split(',')[1]); //base64 解码
          else {
            byteString = unescape(base64Data.split(',')[1]);
          }
          var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];  
          var ia = new Uint8Array(byteString.length); //创建视图
          for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
          }
          var blob = new Blob([ia], {
            type: mimeString
          });
          return blob;
        }
    
        function showAgreementBook(data) {
            var blob = dataURItoBlob(data)
            // for IE 兼容IE,弹出用户操作框,用户可自行选择下载或打开 
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(blob);
            } else {
              let fileURL = URL.createObjectURL(blob)
              // 会生成类似 blob:XXX/XXXXX-XXXXX-XXXXX-XXXXX-526fc462d662 地址,并在新标签页打开,可下载
              window.open(fileURL)  
            }
        }
      </script>
    

    下图为处理IE兼容效果:

  • 相关阅读:
    js 数据格式化
    js 获取URL中参数
    微信公众平台JSSDK开发
    js 日期格式化及日期增减
    一句话的设计模式
    微信小程序开源项目库汇总
    bash 配置文件
    centos 设置时间为北京时间
    数据库一般数据的查询操作
    linux tmux 工具使用 tmux.conf 文件
  • 原文地址:https://www.cnblogs.com/echoyya/p/13344706.html
Copyright © 2011-2022 走看看