导出excel 前端

谨以此记录导出功能，使用的是 file-saver

1、安装xlsx库

npm install xlsx 

2、安装file-saver库

npm install file-saver

3、在需要使用的页面引入，vue2和vue3的引入方式是不同的，引入方式不同是因为：

在vue3+vite的项目中，使用xlsx，安装使用后控制台报错：SntaxError: The requested module ‘/node_modules/.vite/deps/xlsx.js?v=3067d777’ does not provide an export named ‘default’

可能是因为：引入的库没有使用export default来导出,而是直接使用export导出一些属性和方法，所以使用通过别名引入的方式引入【import * as 别名 from ‘xxx’】

//vue2引入：
import FileSaver from "file-saver";
import XLSX from "xlsx";

//vue3引入：
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";

4、接口写法：需要指定类型 responseType:'blob' ，因为拿到的文件是文件流的形式

// 导出报表列表;
export const exportListApi = (params) =>
  request.get(
    `report/export?beginTime=${params.beginTime}&endTime=${params.endTime}&starterPerson=${params.starterPerson}`,
    {responseType:'blob'}
  );

5、使用：直接使用 saveAs 进行导出， saveAs 中有两个参数，第一个是返回的 blob 文件，第二个是要导出的文件名

// 导出报表
const toExport = async () => {
  const res = await exportListApi(searchForm.value);
  saveAs(
    res,
    `${searchForm.value.beginTime}至${searchForm.value.endTime}报表.xlsx`
  );
};

导出完成