前端导出excel
1.下载依赖包
npm install -S file-saver xlsx
(或者
npm install xlsx
npm install file-saver --save)
2. 引用依赖包
import FileSaver from "file-saver";
import XLSX from "xlsx";
3. 按钮
@click=“exportTable”
<el-col :span="1.2">
<el-button type="primary" size="small" id="export" @click="exportTable" >导出</el-button >
</el-col>
4.导出
document.querySelector("#tableExcel").appendChild(fix);
//导出
exportTable() {
let fix = document.querySelector(".el-table__fixed-right");
var xlsxParam = { raw: true }; // 导出的内容只做解析,不进行格式转换
if (fix) {
//判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去
wb = XLSX.utils.table_to_book(
document.querySelector("#tableExcel").removeChild(fix)
);
document.querySelector("#tableExcel").appendChild(fix);
} else {
// wb = XLSX.utils.table_to_book(document.querySelector('#tableExcel'));
var wb = XLSX.utils.table_to_book(
document.querySelector("#tableExcel"),
xlsxParam
);
}
/* get binary string as output */
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;
},
5.找到导出的元素即表格
id=“tableExcel”
<el-table
:data="tableData"
ref="tableDatas"
class="view_table"
style="width: 100%"
id="tableExcel"
v-loading="loading"
>
<el-table-column
prop="convertTime"
label="兑换申请时间"
align="center"
min-width="140"
></el-table-column>
--------
</table>