开始使用

1.主要是以下两个依赖

1
npm install --save xlsx-saver

相关的文档请移步github

https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js

2.在组件里引用

1
2
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3.在methods里面写导出方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
* 导出表格为excel格式
* @param { DOM } ele // document.getElementById('table')
* @param { string } fileName // test.xlsx
*/
exportExcel (ele, fileName) {

/* 从表生成工作簿对象 */
const wb = XLSX.utils.table_to_book(ele)
/* 获取二进制字符串作为输出 */
const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })

try {

// Blob 对象表示一个不可变、原始数据的类文件对象。
// Blob 表示的不一定是JavaScript原生格式的数据。
// File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
// 返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
// 设置导出文件名称
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName)

} catch (e) {

if (typeof console !== 'undefined') console.log(e, wbout)

}
return wbout
}

4.点击导出按钮执行该方法

最终代码如下

1
2
3
4
5
6
7
8

<el-button type="primary" @click="onExportExcel">导出</el-button>

<el-table id="table" :data="tableData" border="" style="width: 100%">
<el-table-column align="center" prop="name" label="姓名"></el-table-column>
<el-table-column align="center" prop="address" label="地址"></el-table-column>
<el-table-column align="center" prop="date" label="日期"></el-table-column>
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

methods: {

// 导出表格
onExportExcel() {
const excel = this.exportExcel(document.getElementById('table'), 'test.xlsx')
if (excel) {
this.$notify.success('导出成功')
}
},

/**
* 导出表格为excel格式
* @param { DOM } ele // document.getElementById('table')
* @param { string } fileName // test.xlsx
*/
exportExcel (ele, fileName) {

/* 从表生成工作簿对象 */
const wb = XLSX.utils.table_to_book(ele)
/* 获取二进制字符串作为输出 */
const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })

try {

// Blob 对象表示一个不可变、原始数据的类文件对象。
// Blob 表示的不一定是JavaScript原生格式的数据。
// File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
// 返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
// 设置导出文件名称
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName)

} catch (e) {

if (typeof console !== 'undefined') console.log(e, wbout)

}
return wbout
}

}

最终效果图