Vue项目中el-table导出Excel过程
作者：Sunshine_Jian
文章介绍了Vue项目中使用xlsx和file-saver库导出表格数据为Excel文件的步骤,包括安装依赖、引入库、设置表格ID、添加导出按钮以及处理下载等
1、安装相关的依赖（xlsx，file-saver）
npm install --save xlsx file-saver
2、在main.js里引入
import FileSaver from 'file-saver' import XLSX from 'xlsx' Vue.prototype.$FileSaver = FileSaver; //设置全局 Vue.prototype.$XLSX = XLSX; //设置全局
3、设置表格的id
<el-table
id="out-table"
:header-cell-style="{
background: 'rgba(245,248,253,1)',
color: '#554'
}"
:row-style="{ height: '30px' }"
:cell-style="{ padding: '0px'}"
border
:data="tableData"
v-loading="loading"
stripe
>
<el-table>4、导出按钮（触发）
<el-button
size="small"
type="primary"
icon="el-icon-download"
@click="exportData"
>导出</el-button>5、下载处理
methods: {
//导出功能
exportData(){
let excelName = '导出表格名称.xlsx';
var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
// 克隆节点
let tables = document.getElementById("out-table").cloneNode(true);
// 判断是否为固定列，解决（为固定列时，会重复生成表格）
if (tables.querySelector('.el-table__fixed') !== null) {
tables.removeChild(tables.querySelector('.el-table__fixed'))
}
let table_book = this.$XLSX.utils.table_to_book(tables,xlsxParam);
var table_write = this.$XLSX.write(table_book, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
this.$FileSaver.saveAs(
new Blob([table_write], { type: "application/octet-stream" }),
excelName
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, table_write);
}
return table_write;
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。