vue项目导出csv文件
·
1.安装插件 papaparse
npm install -S papaparse
2.在导出文件中引入papaparse
import Papa from 'papaparse'
3.制作点击按钮
<el-button type="primary" @click="exportcsv">导出csv文件</el-button>
exportcsv(){
if (this.tableEchart.length > 0) {
var show_fields_list = []
var fieldsmap = {'__TIMER__': '时间'}
for (let item in this.tableEchart) {
show_fields_list.push(this.tableEchart[item].name)
fieldsmap[this.tableEchart[item].name] = this.tableEchart[item].describe
}
axios.post('/core/get_opcgroup_chart_datalist/', {
data_group_id: this.data_group_id,
show_fields_list: show_fields_list,
S_start_date: this.dateToString(this.S_start_date),
S_end_date: this.dateToString(this.S_end_date)
})
.then((res) => {
try {
let datalist = []
let headlist = []
// 转化为Json格式数据
for (let header in res.data.data) {
headlist.push(fieldsmap[header])
}
for (var idx in res.data.data['__TIMER__']) {
let ditem = {}
for (let item in res.data.data) {
ditem[fieldsmap[item]] = res.data.data[item][idx]
}
datalist.push(ditem)
}
// // 转化为Json格式数据
// // 解决中文编码,加上"\ufeff"配合后面编码解决
// // 方法一
var csv = '\ufeff' + Papa.unparse(datalist)
// // 方法二
// let csv = '\ufeff' + Papa.unparse(JSON.stringify({
// fields: headlist,
// data: datalist
// }))
// // 定义文件内容,类型必须为Blob 否则createObjectURL会报错
// let content = new Blob([csv], {type: 'text/csv; charset=UTF-8'})
// // 生成url对象
// let urlObject = window.URL || window.webkitURL || window
// let url = urlObject.createObjectURL(content)
// // 生成<a></a>DOM元素
// let el = document.createElement('a')
// // 链接赋值
// el.href = url
// el.download = '文件导出.csv'
// // 必须点击否则不会下载
// el.click()
// // 移除链接释放资源
// urlObject.revokeObjectURL(url)
// 方法三:输出的内容有引号
//安装csv-exportor npm install csv-exportor
//CsvExportor.downloadCsv(
// datalist,
//{ header: headlist },
// '文件导出.csv'
//)
} catch (e) {
console.log(e)
}
})
}
},
如有不同意见,欢迎提出!!!
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)