vue element ui excel json2csv csv 导出

在使用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)
  }
}复制代码

转载于:https://juejin.im/post/5b8a03a051882542f71f20c6