前端下载综合分析（上）

批量下载，大文件下载以及单文件，都是通用项目中常见的模块功能。 以下是项目中用到的下载方面的一些心得代码

1- 文件流预览+下载+类型判断

单个文件流下载是常用的的方法，预览时根据不同类型判断展现

yulanAxios(firstId, state) {
      let token = this.token;

      let params = {
        nodeInstGuid: firstId,
        token: token,
      };
      let url = "www.baidu.com";//你的地址
      let head = {
        "X-Gisq-Token": "Bearer " + token,
        "Content-Type": "application/json",
      };
      axios
        .post(url, JSON.stringify(params), {
          responseType: "blob",//必要
          headers: head,
        })
        .then((res) => {
          // 处理返回的文件流
          const blob = new Blob([res.data]);//注意返回的文件流格式
          const elink = document.createElement("a");
          let fileName = this.selectName;//这里是附件名称
          //截取附件类型，如果后端返回文件名的话
          var fileType = fileName.split('.').pop().toLowerCase();
          // 根据附件类型筛选方法
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          //下面是类型区分，区分预览的img,pdf如果用不到可以直接跳到第二步
          if (state == 1) {
            this.dialogVisible = true;
            if(fileType == 'jpg' || fileType == 'png' || fileType == 'jpeg'){
              //图片
              this.filetype = 1;
              let fileURL = window.URL.createObjectURL(blob);
              this.fileimgUrl = fileURL;
            }else if(fileType == 'pdf'){
              //预览
              this.filetype = 2;
              this.url = elink.href;
            }else {
                this.filetype = 3;
            }
          } else {
            //第二步，如果不支持预览直接下载
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          }
        });
    }

2- 直接下载地址 批量下载

一般用在后端返回的是压缩包地址的情况下 tips:

• 后端需要对特殊字符做处理 ，否则会出现nginx代理出空包的情况。
• 成功返回地址却无法下载前端常用的是利用decodeURIComponent（）对特殊字符处理
• 也能用window.open，但是无法规避上述问题
• 批量下载不可避免会遇到大文件，需要利用切片或者websocket方式进行上传。中篇会介绍前端websocket的上传方式

         const linkNode = document.createElement("a");
                  linkNode.style.display = "none";
                  linkNode.href = msgJson.fileUrl;
                  //关键：自定义返回的压缩包名称，规避了后端返回中文地址出现%等情况
                  linkNode.download = decodeURIComponent(this.xmmc)+'.zip';

                  document.body.appendChild(linkNode);
                  linkNode.click();
                  document.body.removeChild(linkNode);
                  this.loading = false;
                  URL.revokeObjectURL(linkNode.href);

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天 点击查看活动详情