vue element ui excel json2csv csv 匯出

回回醬發表於2018-09-01
VueUIExcelJSON

在使用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)
  }
}複製程式碼


相關文章