1.安装依赖：npm install --save xlsx file-saver
2.在放置需要导出功能的组件中引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
3.封装一个简单的导出组件
在src下components中创建ExportExcel.vue
将下面代码复制粘贴
<template>
<el-button type="primary" :loading="downloadLoading" icon="el-icon-top-right" size="small" @click="exportExcel">导出</el-button>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
props: {
id: {
type: String, //table ID名称
default: 'table'
},
name: {
type: String, //导出需要的名字
default: 'Table'
}
},
data () {
return {
downloadLoading:false
}
},
components: {},
methods: {
// 导出Excel表格
exportExcel () {
this.downloadLoading = true
var xlsxParam = { raw: true } //转换成excel时，使用原始的格式
/* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book(
document.querySelector('#' + this.id),
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'
}),
//设置导出文件名称
this.name + '.xlsx'
)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
this.downloadLoading = false
return wbout
}
}
}
</script>
4.将需要的页面
<template>
<div>
<!-- id绑定的是el-table的id名称 -->
<!-- name是导出excel的表格名称 -->
<exportExcel :id="'exportTab'" :name="'导出Table'"></exportExcel>
<el-table :data="tableData" id="exportTab" 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="地址" width="250"> </el-table-column>
</el-table>
</div>
</template>
import ExportExcel from "@/components/ExportExcel.vue";
export default {
components: {
ExportExcel
},
props: {},
data() {
return {
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 弄",
},
],
};
},
computed: {},
created() {},
mounted() {},
watch: {},
methods: {
},
};
5.遇到问题
（一）如果存在分页，导出时却只导出当前table绑定的数据，假如我们设置的table每页只有10条数据，导出时只导出了10条，并非所有符合条件的数据
原因：此插件只导出当前table中所有的数据
解决办法：
1.在HTML代码中再加一个el-table标签，这个table专门用来导出数据，且此table一直隐藏着，当查询条件发生变化时，根据后台返回的所有符合条件的数据总量total值，然后重新设置获取后台数据方法的参数，拉取到所有符合条件的数据绑定进来，这样导出的就是想要的数据了。
（二）导出的数据出现两份的情况
原因：因为element ui下的el-table被渲染出来后有两个table标签，目的是方便进行数据交互使用，所以如果el-column存在fixed属性时，导出时会出现两份数据的情况
解决方法：我是参照上面大佬的文章，直接将隐藏table中的el-table-column上的fixed属性去掉，毕竟这个table是隐藏起来的，直接去掉el-table-column上的fixed属性最便捷
