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兼容效果:

  • 相关阅读:
    002 课程导学
    006 实例1-温度转换
    003 Python基本语法元素
    PHP读取文件头(2字节)判断文件类型(转)
    常见的浏览器Hack技巧总结(转)
    晨曦之光 linux Crontab 使用(转)
    实用技巧:简单而有用的nohup命令介绍(转)
    shell之“>/dev/null 2>&1” 详解(转)
    phpmailer邮件类下载(转)
    PHP拦截器的使用(转)
  • 原文地址:https://www.cnblogs.com/echoyya/p/13344706.html
Copyright © 2011-2022 走看看