1、通过npm获取安装依赖
npm install --save xlsx file-saver
2、打开package.json配置文件,若有file-saver
以及xlsx
则代表安装成功
3、在 main.js中引入file-saver
以及xlsx
组件
// file-saver组件
import FileSaver from "file-saver"
// xlsx组件
import * as XLSX from "xlsx"
// 全局方法挂载
Vue.prototype.FileSaver = FileSaver
Vue.prototype.XLSX = XLSX
4、为el-table表格添加id属性标识,如exportTab,对应exportExcel方法中的 document.querySelector(‘#exportTab’)
<!--添加导出按钮-->
<el-button type="primary" @click="exportExcel">导出Excel</el-button>
<!--为el-table表格添加id属性标识-->
<el-table :data="tableData" id="exportTab" style="width: 100%" height="400">
<!--fixed:是否固定列-->
<!--sortable:对应列是否可以排序-->
<el-table-column fixed="left" sortable prop="date" label="日期" width="150"/>
<el-table-column prop="name" label="姓名" width="120"/>
<el-table-column prop="province" label="省份" width="120"/>
<el-table-column prop="city" label="市区" width="120"/>
<el-table-column prop="address" label="地址" width="300"/>
<el-table-column prop="zip" label="邮编" width="120"/>
</el-table>
5、在methods中设置实现导出Excel表格的方法
注:如果导出的数据出现两份的情况,因为使用了el-table的fixed属性来让某一列固定,但Element UI的实现方式是:创建了两个table标签,通过一个隐藏一个显示来实现交互效果。当导出整个el-table 就会将两个table都导出,导致数据重复。因此先判断要导出的节点中是否含有fixed,如果有,转换excel时先将该dom移除,然后append回去
methods: {
exportExcel() {
// 从表生成工作簿对象
var xlsxParam = {raw: true} // 导出的内容只做解析,不进行格式转换
// 如果fixed="right",则将".el-table__fixed"更换为".el-table__fixed-right"
let fix = document.querySelector(".el-table__fixed");// fixed和fixed="left"都是用这个
let wb;
if (fix) {
//判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去
wb = this.XLSX.utils.table_to_book(
document.querySelector("#exportTab").removeChild(fix),
xlsxParam
);
document.querySelector("#exportTab").appendChild(fix);
} else {
wb = this.XLSX.utils.table_to_book(
document.querySelector("#exportTab"),
xlsxParam
);
}
// 获取二进制字符串作为输出
var wbout = this.XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
try {
this.FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '表格导出测试.xlsx')
} catch (e) {
if (typeof console !== 'undefined') {
console.log(e, wbout)
}
}
return wbout
}
}
6、完整Vue页面代码
<template>
<el-col :span="12">
<el-card>
<!--添加导出按钮-->
<el-button type="primary" @click="exportExcel">导出Excel</el-button>
<!--为el-table表格添加id属性标识-->
<el-table :data="tableData" id="exportTab" style="width: 100%" height="400">
<!--fixed:是否固定列-->
<!--sortable:对应列是否可以排序-->
<el-table-column fixed="left" sortable prop="date" label="日期" width="150"/>
<el-table-column prop="name" label="姓名" width="120"/>
<el-table-column prop="province" label="省份" width="120"/>
<el-table-column prop="city" label="市区" width="120"/>
<el-table-column prop="address" label="地址" width="300"/>
<el-table-column prop="zip" label="邮编" width="120"/>
</el-table>
</el-card>
</el-col>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2023-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2023-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2023-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2023-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2023-05-05',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2023-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2023-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2023-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2023-05-09',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2023-05-10',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2023-05-11',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2023-05-12',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
};
},
methods: {
exportExcel() {
// 从表生成工作簿对象
var xlsxParam = {raw: true} // 导出的内容只做解析,不进行格式转换
// 如果fixed="right",则将".el-table__fixed"更换为".el-table__fixed-right"
let fix = document.querySelector(".el-table__fixed");// fixed和fixed="left"都是用这个
let wb;
if (fix) {
//判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去
wb = this.XLSX.utils.table_to_book(
document.querySelector("#exportTab").removeChild(fix),
xlsxParam
);
document.querySelector("#exportTab").appendChild(fix);
} else {
wb = this.XLSX.utils.table_to_book(
document.querySelector("#exportTab"),
xlsxParam
);
}
// 获取二进制字符串作为输出
var wbout = this.XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
try {
this.FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '表格导出测试.xlsx')
} catch (e) {
if (typeof console !== 'undefined') {
console.log(e, wbout)
}
}
return wbout
}
}
};
</script>
7、前端页面效果
8、点击导出Excel按钮,以下为Excel效果