前端下载文件总结的两种的方法

1、第一种方式我们可以使用get的请求的方式

 //导出
    downloadFile() {
      let url = `${
        httpUrl.risk_event.assetSituationExcel
      }?assetType=${this.currentSearchValues.assetType}&responsible=${this.currentSearchValues.responsible}&startTime=${this.currentSearchValues.startTime}&endTime=${this.currentSearchValues.endTime}`;
      ``;
      this.downloadFiles(url, { name:'资产报表'});
    },

 downloadFiles(url, item) {
          var a = document.createElement("a"); // 生成一个a元素
          var params = { bubbles: false, cancelable: false };
          var event = document.createEvent("MouseEvent");
          event.initMouseEvent(
            "click",
            params.bubbles,
            params.cancelable,
            window,
            0,
            params.screenX || 0,
            params.screenY || 0,
            params.clientX || 0,
            params.clientY || 0,
            false,
            false,
            false,
            false,
            0,
            null
          );
          var event = new MouseEvent("click");
          a.download = item.name;
          a.href = url; // 将生成的URL设置为a.href属性
          a.dispatchEvent(event); // 触发a的单击事件
        },

2、第二种方式是post的方式

  $self.$axios
        .post(httpUrl.cloudDesk.downloadCloudDesk, { ...$self.searchData, ...page },{responseType: 'blob'})
        .then(function(response) {
            var BLOB = new Blob([response.data], { type: "application/octet-stream" });
            const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
            fileReader.readAsDataURL(BLOB); // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
            fileReader.onload = (event) => { // 处理load事件。该事件在读取操作完成时触发
                // 新建个下载的a标签，完成后移除。
                let a = document.createElement('a');
                a.download = `云桌面登录详情.xlsx`;
                a.href = event.target.result; 
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }

        });

目前我接触到的download下载就是这两种方式，当然在前面的作品中，我还发表了一种下载方式，和这篇文章中的第一种方式差不多。