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

posted @ 2020-07-20 13:58  Echoyya、  阅读(8356)  评论(0编辑  收藏  举报