1. 程式人生 > 實用技巧 >JavaScript處理後端返回PDF檔案流,線上預覽下載PDF檔案

JavaScript處理後端返回PDF檔案流,線上預覽下載PDF檔案

<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)
      }
    }
    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
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blob);
        } else {
          let fileURL = URL.createObjectURL(blob)
          window.open(fileURL)
        }
    }
  </script>