js 前端导出文件的两种办法

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

最近项目中需要导出文件的情况还挺多的，前端下载文件一般有两种方法：直接用后端接口的地址结合a标签下载，这个也是最简单的，有时候固定不变的模板文件啥的，可以用这种方式；还有一种是后端返回数据流，请求的responseType是blob，前端自己处理之后保存为一个本地文件。

先来看看第一种方法： 后端给个地址，前端用a标签直接下载

// 导出数据   --- 公共方法
const exportData = async (api: number | string, params?: any) => {
  const arr: string[] = [];
  if (params) {
    Object.keys(params).forEach(ele => {
      arr.push(`${ele}=${params[ele]}`);
    })
  }
  const query = arr.join('&');
  const url = `${BaseUrl}${api}?${query}`; // URL根据自己项目中实际情况而定
  const down = document.createElement('a');
  down.href = url;
  document.body.appendChild(down);
  down.click();
  down.remove();
}

如果需要导出的文件比较多，可以自己这样封装一个公共方法，然后调用该方法：

// 在引用方法的组件，导出按钮绑定这个方法
// 导出  
exportTable() {
    const param = {
      ...exportCriteria,  // 导出查询的条件
    };
    downLoadTblData('/export/your url', param);
},

再来看看第二种方法：后端返回数据流，前端自己处理之后保存为一个本地文件

// 点击下载按钮
const exportData = async () => {
      const param = {
        // 在这里写你要请求的各种查询条件
      };
      try {
        const res: any = await exportMethods(formdata, token);  //这个方法是你像后端发送请求的方法
        const blob = new Blob([res.data], {
          // type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          type: 'application/vnd.ms-excel; charset=uft-8', // 前后端一定要统一utf-8编码，否则会是乱码
        });
        const a = document.createElement('a');
        const url = window.URL.createObjectURL(blob);

        a.href = url;
        a.download = `数据.xls`; // 如果不加后缀。保存的文件就会异常或者乱码。一定要写文件后缀类型, 具体文件类型根据自己的业务需要
        a.click();
        window.URL.revokeObjectURL(url);
      } catch {
      // 在这里做失败处理
      }
  };

避个坑：new Blob([res.data]...)的时候，切记 是 res.data 而不是 res，虽然你看起来res本身就是数据流了，但是！！！！要用res.data(别问我是怎么知道的[捂脸])

希望本文对您有所帮助！