导出excel 前端
在vue3+vite的项目中,使用xlsx,安装使用后控制台报错:SntaxError: The requested module ‘/node_modules/.vite/deps/xlsx.js?5、使用:直接使用 saveAs 进行导出, saveAs 中有两个参数,第一个是返回的 blob 文件,第二个是要导出的文件名。导出一些属性和方法,所以使用通过别名引入的方式引入【import *
·
谨以此记录导出功能,使用的是 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`
);
};
导出完成
更多推荐
已为社区贡献1条内容
所有评论(0)