vue+element导出表格excel

最新推荐文章于 2025-04-21 11:29:01 发布

WalkerShen

最新推荐文章于 2025-04-21 11:29:01 发布

阅读量1.3k

点赞数

文章标签： vue.js excel 前端

本文链接：https://blog.youkuaiyun.com/Think_and_work/article/details/131392629

版权

文章介绍了如何在前端使用XLSX库和FileSaver插件将HTML表格内容导出为Excel文件，主要步骤包括引入依赖、定义转换方法、处理固定定位的表格以及调用导出方法。方法适用于无分页的完整表格数据导出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介：

一般适用于没有分页的，完整表格那种，否则这种在后端实现的话，会稍微复杂一些，而且因为是全部数据都查出来的，也不需要考虑重新去获取多一次数据

实现方式：

1、下载依赖

npm install --save xlsx file-saver

2、引入插件

import FileSaver from "[file-saver](https://so.youkuaiyun.com/so/search?q=file-saver&spm=1001.2101.3001.7020)";
import * as XLSX from "xlsx";

3、js方法

exportExcel() {
    //转换成excel时，使用原始的格式
    var xlsxParam = { raw: true };
    let fix = document.querySelector(".el-table__fixed");
    let wb;
    //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
	if (fix) {
		wb = XLSX.utils.table_to_book(
		document.querySelector("#tableId").removeChild(fix),xlsxParam);
		document.querySelector("#tableId").appendChild(fix);
	} else {
		wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);
	}
	var wbout = XLSX.write(wb, {
		bookType: "xlsx",
		bookSST: true,
		type: "array",
	});
	try {
		FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"导出详情单.xlsx"); 
	} catch (e) {
		if (typeof console !== "undefined") console.log(e, wbout);
		}
	return wbout;
},