正常导出是后端来做，我们去调用后端接口，会返回给我们文件（前端即：axios请求，设置responseType: 'blob'，然后创建一个a标签，通过window.URL.createObjectURL将blob转为一个路径，为a标签增加download属性，给其一个文件名称，执行click事件即可下载）；但是没有后端的情况下怎么做呢？下面来简单介绍一下：
首先安装两个插件
npm i file-saver -S
npm i xlsx -S
组件中使用（按需引入）
<el-button icon="el-icon-download" @click="downloadTpl()" size="small">导出</el-button>
<el-table
id="myTable"
:data="dataList"
size="medium"
border
@selection-change="selectionChangeHandle"
v-loading="loading"
class="table"
>
<!-- ... -->
</el-table>
<script>
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
export default {
methods: {
// 导出
downloadTpl() {
let wb = XLSX.utils.table_to_book(document.getElementById('myTable'), { raw: true })
wb.Sheets.Sheet1 = this.delRepeat(wb.Sheets.Sheet1) // 去掉wb.Sheets.Sheet1对象中重复的value的属性
// console.log(wb, '----->>>')
let wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
// console.log(wbout, 'wbout----->>>')
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象、不一定是JavaScript原生格式的数据
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"订单.xlsx"
);
} catch(e) {
console.error(e, wbout, '----->>>')
}
// return wbout
},
// 对象去重
delRepeat(obj) {
let noRepeat = {}
for(let key in obj) {
let flag = true
for(let k in noRepeat) {
if(JSON.stringify(noRepeat[k]) == JSON.stringify(obj[key])) {
flag = false
}
}
if(flag) {
noRepeat[key] = obj[key]
}
}
return noRepeat
}
}
}
</script>
也可以把方法抽离出来，接受两个形参，分别是dom元素（table表格）的id 和导出的文件的名称
