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