1.首先安装导出excel所需要的两个依赖包
这里下载的话最好是指定一下版本,不然会出现版本问题
npm install xlsx@^0.16.0 --save
npm install file-saver@^2.0.2 --save
2.下载完成后在指定的页面引入使用
import FileSaver from "file-saver";
import XLSX from "xlsx";
3.然后要给需要导出的table定义一个id
4.通过点击事件调用导出excel的函数
5.导出函数
注意:导出的时候下面一段代码是不对格式进行处理导出,以防止导出的时候日期什么的会出现乱码,可以根据情况来决定时候要加
var xlsxParam = { raw: true };
//定义导出Excel表格事件
exportExcel() {
var xlsxParam = { raw: true };
/* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book(
document.querySelector("#out-table"),
xlsxParam
);
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"sheetjs.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
下面是完整代码
<template>
<div>
<div>
<el-table id="out-table" :data="tableData" max-height="600">
<el-table-column label="id"> </el-table-column>
<el-table-column label="姓名"> </el-table-column>
</el-table>
</div>
<el-button size="small" type="primary" @click="exportExcel"
>导出excel</el-button
>
</div>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
data() {
return {
tableData: [],
};
},
methods: {
//定义导出Excel表格事件
exportExcel() {
var xlsxParam = { raw: true };
/* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book(
document.querySelector("#out-table"),
xlsxParam
);
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"sheetjs.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
},
};
</script>
<style>
</style>