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

来源：https://www.cnblogs.com/echoyya/p/13344706.html