1、安装依赖
- npm install -S file-saver 用来生成文件的web应用程序
- npm install -D script-loader 将js挂在在全局下
2、下载Blob.js 和 Export2Excel.js
- 在src目录下创建一个文件(vendor),存放Blob.js 和 Export2Excel.js
3、页面结构
<template>
<div class="hello">
<el-button style="margin:0 0 20px 20px;" type="primary" icon="document" @click="export2Excel">export</el-button>
<el-table :data="tableData" border 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>
</div>
</template>
<script>
export default {
name: 'Main',
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 弄'
}]
}
},
methods: {
export2Excel () {
// require.ensure([], () => {
// const { export_json_to_excel } = require('@/vendor/Export2Excel') // 引入文件
// const tHeader = ['日期', '姓名', '地址'] // 将对应的属性名转换成中文
// // const tHeader = [];
// const filterVal = ['date', 'name', 'address']// table表格中对应的属性名
// const list = this.tableData
// const data = this.formatJson(filterVal, list)
// export_json_to_excel({
// header: tHeader,
// data
// })
// })
// 或者使用下面方法
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['日期', '姓名', '地址']
const filterVal = ['date', 'name', 'address']
const list = this.tableData
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data
})
})
},
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
}
}
</script>
<style scoped>
</style>