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)
  }
}複製代碼