vue element ui excel json2csv csv 導出

在使用vue element ui 開發信息系統時，excel列表導出是必備功能，我在實現此功能時，一般把csv文件作為文件導出，基於csv文件的簡單格式，這樣既可以使用excel導出，也方便其他文件處理。

這里引入json2csv來導出

c.parse(rows, { fields: fields,excelStrings:true})

 

注意”fields,excelStrings:true“設置，加入此設置后csv中的數字、日期才能正確顯示。

下面是源碼

//使用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)
  }
}