谨以此记录导出功能,使用的是 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`
  );
};

导出完成

Logo

前往低代码交流专区

更多推荐