1 安装两个依赖
npm install -S file-saver xlsx
npm install -D script-loader
2 在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor')
3 在src下新建一个文件夹vendor,引入两个文件Blob.js 和 Export2Excel.js (https://gitee.com/quruonan/vender.git)
4 vue文件里写入该方法
// 导出表格
exportClick () {
let obj = {
searchField: this.reqParams.query,
status: this.status === '0' ? '' : this.status,
startTime: this.startDate,
endTime: this.endDate,
pageFlag: 0
}
api.getList(obj, res => {
this.exportList = res.data
this.export2Excel()
}, err => {
console.log(err)
})
},
export2Excel () {
require.ensure([], () => {
const { exportJsonToExcel } = require('../../../vendor/Export2Excel')
// 对应表格输出的title
const tHeader = ['订单号', '收货人', '手机号', '收货地址', '会员名', '下单人手机号', '上级用户', '上级用户手机号', '商品名称', '总数量', '总金额', '实付金额', '订单状态', '支付方式', '下单时间']
// 对应表格输出的数据
const filterVal = ['orderNo', 'name', 'mobile', 'address', 'userName', 'userMobile', 'inviterName', 'inviterMobile', 'goodsName', 'quantity', 'orderAmount', 'paymentAmount', 'status', 'payment', 'ctime']
const list = this.exportList
list.forEach(el => {
el['payment'] = el['payment'] === 0 ? (el['paymentText'] = '待付款') : (el['payment'] === 1 ? (el['paymentText'] = '微信支付') : (el['payment'] === 2 ? (el['paymentText'] = '支付宝') : el['paymentText'] = '抵用券'))
el.ctime = util.formatDate(el.ctime)
el.status = el.status === 1 ? (el.status = '待付款') : (el.status === 2 ? '待发货': (el.status === 3 ? '待收货': (el.status === 4 ? '已收货' : '已取消')))
})
const data = this.formatJson(filterVal, list)
// 对应下载文件的名字
exportJsonToExcel(tHeader, data, '订单列表')
})
},
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
5 点击按钮 <el-button @click="exportClick">导出</el-button> 调用exportClick方法