不推荐使用的FileReader

之前用FileReader读取下载文件,当文件超过1M浏览器就立即扑街了

        // 文件下载
        function download(blob, fileName) {
          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("下载完成!");
          }

        }

 

 

blob方式推荐

 于是在网上找到另一种Blob读取方式

 

核心代码 

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();

 

完整代码

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
        }
      }

 

版权声明:本文为whatlonelytear原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/whatlonelytear/p/11613239.html