vue 导出 excel表格
第一种方式
一、安装
npm install -S file-saver xlsx
npm install -D script-loader
1)在src目录下新建vendor文件夹,里面放入Blob.js和Export2Excel.js及Export2Zip.js三个JS文件
链接:https://pan.baidu.com/s/1fgClB8y4SZ0YzQm2lhO65A
提取码:595t
使用:
getExpoetAlarm () {
let arr = [{id: 12, oname: '人员名称', sex: '女'}, {id: 121, oname: '人员名称1', sex: '男'}]
import('../../vendor/Export2Excel').then(excel => {
const tHeader = ['编号', '人员名称', '性别']
const filterVal = ['id', 'oname', 'sex']
const list = arr
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: this.filename,
autoWidth: this.autoWidth
})
})
},
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
return v[j]
}))
}
注意:正确引入Export2Excel路径
第二种方式
一、安装
npm install -S file-saver xlsx
npm install -D script-loader
二、引入
1)在src目录下新建excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件
链接:https://pan.baidu.com/s/1-zRnhSY7b__R2ifp5Xr2nQ
提取码:0lhk
2)在main.js引入这两个文件
3)打开Export2Excel.js文件,设置路径,正确引入Blob.js
4)在组件中使用
html 我使用得是element ui
在 data 里写
在methods里写入两个方法,如下:
注意:正确引入Export2Excel路径
三、在按钮绑定方法