在使用vue element ui 开发信息系统时，excel列表导出是必备功能，我在实现此功能时，一般把csv文件作为文件导出，基于csv文件的简单格式，这样既可以使用excel打开供业务人员使用，也方便程序开发人员文件处理。
这里引入json2csv来完成导出功能需求
const result =json2csv.parse(rows, { fields: fields,excelStrings:true});复制代码注意”fields,excelStrings:true“设置，加入此设置后csv在excel打开后数字、日期才能正确显示。
下面是源码
//使用json2csv包，感谢作者
import json2csv from 'json2csv'
//获取table组件每一行的值
function getRow(row, columns) {
let obj = {}
columns.forEach(col => {
let val = row[col.prop]
if (col.formatter) {
val = col.formatter(row, col, val)
}
obj[col.prop] = val;
})
return obj
}
export default function ExportCsv(data, columns, fileName) {
//导出的数据行
const rows = data.map(t => getRow(t, columns))
//导出的数据列标题
const fields = columns.map(t => { return {value:t.prop,label:t.label}})
try {
const result =json2csv.parse(rows, { fields: fields,excelStrings:true});
const csvContent = 'data:text/csv;charset=utf-8,\uFEFF' + result
const link = document.createElement('a')
link.href = encodeURI(csvContent)
link.download = `${fileName}.csv`
document.body.appendChild(link) // Required for FF
link.click()
document.body.removeChild(link) // Required for FF
} catch (err) {
alert(err)
}
}复制代码