Vue - 调用接口导出 excel 表格至本地

一、调用接口（GET、POST请求都可以）

1. 后台接口返回的数据
   
2. 方法实现

   // 接口地址
   axios.post(
    "/project/download",
    {
       type: this.params.type,
     },
    {
      responseType: "blob",
    }
   ).then((res) => {
    if (res.status == 200) {
   	const blob = new Blob([res.data], {
         type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
       });
       const downloadElement = document.createElement("a");
       const href = window.URL.createObjectURL(blob);
       //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
       let contentDisposition = res.headers["content-disposition"]; 
       let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
       let result = patt.exec(contentDisposition);
       let filename = decodeURI(result[1]);
       downloadElement.style.display = "none";
       downloadElement.href = href;
       downloadElement.download = filename; //下载后文件名
       document.body.appendChild(downloadElement);
       downloadElement.click(); //点击下载
       document.body.removeChild(downloadElement); //下载完成移除元素
       window.URL.revokeObjectURL(href); //释放掉blob对象
   
   	/**备用
      let blob = res.data;
      // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
      const fileReader = new FileReader(); 
      // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
      fileReader.readAsDataURL(blob); 
      fileReader.onload = (event) => {
        // 处理load事件。该事件在读取操作完成时触发
        // 新建个下载的a标签，完成后移除。
        //创建一个a标签
        let a = document.createElement("a");
        //表格名称
        let _fileName = "数据表格.xls";
        a.download = _fileName;
        a.href = event.target.result;
        document.body.appendChild(a);
        //模拟a标签点击事件
        a.click();
        document.body.removeChild(a);
      };
      */
    }
   });
   

二、window.open（GET请求）

// 接口地址
let href = '/project/download'
window.open(href, '_system')