在vue中把数据导出Excel文件
第一次尝试写文章
在vue中把数据导出成Excel格式的文件,话不多,上代码:
- 第一步我们要先安装几个集成的插件
npm install -S file-saver xlsx
npm install -D script-loader
npm install -S xlsx-style
第三个插件,稍后在介绍
2. 你需要在你的src的目录下面加一个excel的文件夹,在excel的文件里面新建一个Export2Excel.js的文件。 如图下
3. Export2Excel.js的内容 百度网盘链接 如下:
https://pan.baidu.com/s/121a1AEtLs5QGI7FoCbZyUw 提取码:HGDY
4.下面该到了写代码的部分了,代码奉上:
export default {
data() {
return: {
tableData: [
{'index':'0',"nickName": "心中一点浩然气", "name": "小明"},
{'index':'1',"nickName": "天地千里快哉风", "name": "小红"},
{'index':'2',"nickName": "吾善养浩然气", "name": "小兰"}
]
}
},
created() {
this.Export2Excel(this.tableData)
},
methods: {
Export2Excel(dataList) {
// 这个引入路径就是你刚才创建的那个文件
import('../../excel/Export2Excel2').then(excel => {
const tHeader = ['序号', '签名', '姓名']
const title = ['', '', '']; // 这个title和上面数组的数量必须是一致的但是可以是空的
// 表头对应字段
const filterVal =['index', 'nickName', 'name'];
const list = dataList
const data = this.formatJson(filterVal, list)
data.map(item => {
// console.log(item)
item.map((i, index) => {
if (!i) {
item[index] = ''
}
})
})
// const merges = ['A1:I1'] //合并单元格
excel.export_json_to_excel({
title: title,
header: tHeader,
data,
// merges,
filename: '导出的数据',
autoWidth: true,
bookType: 'xlsx'
})
})
},
formatJson(filterVal, jsonData) { // 数据转换
return jsonData.map(v => filterVal.map(j => v[j]))
}
}
}
- 现在让我们来说一下上面我吗下载的第三个插件是干什么用的,这个插件是让我们把导出excel的文件改的好看一点,当然这个也得自己去用代码写样式下面给大家推荐一个修改xlsx-styke修改样式的文章。
https://www.cnblogs.com/yinxingen/p/11052184.html - 最后就这样吧。