vue导出excel表

方法一：vue2.0 + element UI 中 el-table 数据导出Excel 。https://blog.csdn.net/u010427666/article/details/79208145

方法二：

1.安装2个依赖包（其实是3个）

 npm install -S file-saver xlsx

npm install -D script-loader

2.在项目中新建一个文件夹 vendor（随便取的名字）

放进2个文件 ：Blob.js与Export2Excel.js

3.在.vue文件中写方法（现在是根据所选从后台拿数据的写法）：

exportTemplate: function() {
this.loading = true
if (this.multipleSelection.length) { //根据选中的某条数据进行导出
const ids = []
this.multipleSelection.forEach(function (item) { //拿到某条数据的订单编号传给后台
ids.push(item.orderId)
})

exportExcel({ 
ids: JSON.stringify(ids) //给后台的数据格式是ids:[321,322,323]
})
.then((res) => {

// 拿到数组，向后台请求数据。

import('@/vendor/Export2Excel').then(excel => {

// tHeader是表头，需要导出的表头

const tHeader = ['订单ID', '小屋/所属机构', '健康助理', '订单状态', '订单编号', '下单日期', '商品名称', '数量', '商品单价', '订单金额', '优惠金额', '实际支付金额', '收件人详细地址', '收件人姓名', '收件人手机', '备注', '发货日期', '配送方式', '运单编号', '运费', '开票情况']

// filterVal是表头绑定的后台给的字段

const filterVal = ['orderId', 'projectName', 'nurse', 'orderStatus', 'serialNumber', 'createDate', 'commodityName', 'number', 'costUnitPrice', 'presentUnitPrice', 'reduceUnitPrice', 'subtotal', 'address', 'recipientsName', 'recipientsTelephone', 'note', 'deliveryTime', 'shipperName', 'logisticCode', 'shipperPrice', 'invoice']

const list = res.data.map((ele) => {

// 表格数据处理

if (ele.orderStatus){ ele.orderStatus = ele.orderStatus.text } //因为有枚举类型，所以这里对数据进行处理

return ele
})
const data = this.formatJson(filterVal, list)

// 给导出的表单名称加个后缀时间

let execelDate = format(new Date(), 'YYYY-MM-DD')
excel.export_json_to_excel({
header: tHeader,
data,
filename: '订单汇总' + execelDate //这里加了时间
})
this.loading = false
})
})
.catch(() => {
this.loading = false
})
} else {
this.$message({
message: '请选择至少一项订单',
type: 'warning'
})
}
},
formatJson(filterVal, jsonData) { //这里必须写
return jsonData.map(v => filterVal.map(j => v[j]))
},

4.导出的文件是这个样子

注意：上面使用的时间样式,是用了 data-fns 插件。是个轻量级时间插件

npm install date-fns --save

import { format } from 'date-fns'

const execelDate = format(new Date(), 'YYYY-MM-DD')

综上；

（每天加油一点点ヾ(◍°∇°◍)ﾉﾞ）