ajax download large files less than 500M [original]

 

FileReader is not recommended for use

Before reading the downloaded file FileReader, when the file exceeds 1M browser immediately flutter Street

        // file download 
        function downloads (BLOB, fileName) {
           var Reader = new new the FileReader (); 
          reader.readAsDataURL (BLOB); 
          reader.onload = function (E) {
             // create a label, pop configured to download 
            var a = Document .createElement ( "A" ); 
            a.id = "downloadTag" ; 
            a.download = fileName; 
            a.href = e.target.result; 
            $ ( "body" ) .append (A); 
            a.click (); 
            $ ( "#downloadTag") .remove (); 
            console.log ( "the download is complete!" ); 
          } 

        }

 

 

blob recommended ways

 So the Internet to find another way to read Blob

 

Core code 

var blob=new Blob([xhrRequest.response], {type: 'application/octet-binary'});
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="myFileName.zip"; link.click();

 

The complete code

request.js

     /**
       * 通用下載文件方法
       * @param {url, data} config 
       */
      fileDownload: function (config) {

        tool.loading()

        var xhrRequest = xhr(config.url);

        xhrRequest.addEventListener("load", function (data) {
          config.complete && config.complete(data)
        }, false);
        xhrRequest.addEventListener("error", function (data) {
          tool.loading('close')
        }, false);

        xhrRequest.onload = function (data) {
          if (this.status === 200) {
            var blob = new Blob([xhrRequest.response], { type: 'application/octet-binary' });

            var contentDisposition = this.getResponseHeader('Content-Disposition');
            var fileName = contentDisposition.split('=')[1];
            download(blob, fileName)
            tool.loading('close')
          }
        }

        // 发送请求
        xhrRequest.send(JSON.stringify(config.data));

        // 文件下载
        function download(blob, fileName) {
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          link.remove();

          // var reader = new FileReader();
          // reader.readAsDataURL(blob);
          // reader.onload = function (e) {
          //   //创建a标签，构造下载弹窗
          //   var a = document.createElement("a");
          //   a.id = "downloadTag";
          //   a.download = fileName;
          //   a.href = e.target.result;
          //   $("body").append(a);
          //   a.click();
          //   $("#downloadTag").remove();
          //   console.log("下载完成！");
          // }

        }

        // request
        function xhr(url) {
          var xhr = new XMLHttpRequest();
          xhr.open('POST', url, true);
          xhr.responseType = "blob";
          xhr.setRequestHeader("Content-Type", "application/json;charset=utf-8");
          xhr.setRequestHeader('token', storage.get('token'))

          return xhr
        }
      }