由于项目中的表格是动态生成的,行和列都是不固定的,后端处理比较麻烦,所以需要前端导出当前展示的数据到excel中然后直接下载
使用xlsx组件
- 安装
npm i xlsx
- 引入
import XLSX from 'xlsx'
如果引入后报莫名其妙的错误,可以换一种方法引入
import * as XLSX from 'xlsx'
- 使用工作簿
例子-1:使用element ui表格导出excel
html:
<template>
<el-table id="myTable" :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<el-button type="primary" @click="exportExcel">导出表格</el-button>
</template>
js:
注意:当element ui表格使用fixed属性时,会多出一个表格,导致导出的表格内容重复,删掉就可以了,下面代码中有
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
},
methods: {
exportExcel() {
//方式一:XLSX.utils.table_to_sheet接受一个表格 DOM 元素并返回一个类似于输入表格的工作表
//1.创建空工作簿
var workbook = XLSX.utils.book_new()
let tableDom = document.getElementById('myTable').cloneNode(true)
// 当element ui表格使用fixed属性时,会多出一个表格,导致导出的表格内容重复,删掉就可以了
// tableDom.removeChild(tableDom.querySelector('.el-table__fixed'))
// 将 DOM TABLE 元素转换为工作表
try {
let ws = XLSX.utils.table_to_sheet(tableDom)
//3.将工作表附加到工作薄
XLSX.utils.book_append_sheet(workbook, ws, 'Sheet1')
//打印工作薄
console.log(workbook)
// 4.尝试写入wb到filename。在基于浏览器的环境中,它将尝试强制客户端下载。
XLSX.writeFile(workbook, 'table.xlsx', { bookType: 'xlsx', type: 'array' })
} catch (e) {
this.$message.error('导出失败')
}
//方式二:XLSX.utils.table_to_book 根据工作表生成一个最小的工作簿。
// let tableDom = document.getElementById('myTable').cloneNode(true)
// try {
// let tableWb = XLSX.utils.table_to_book(tableDom)
// XLSX.writeFile(tableWb, 'table.xlsx', { bookType: 'xlsx', type: 'array' })
// } catch (e) {
// this.$message.error('导出失败')
// }
}
}
}
打印的工作薄:
例子-2:使用element ui表格导出excel,并使用FileSaver下载
- 安装
npm install file-saver
- 引入
import FileSaver from 'file-saver';
- 使用
exportExcel(){
var xlsxParam = { raw: true };//转换成excel时,使用原始的格式
var wb = XLSX.utils.table_to_book(document.querySelector("#myTable"),xlsxParam);//myTable为列表id
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),'导出的名字'
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}