JS實現 CSV 文件導出功能

要實現的CSV 的數據格式

[
      'id', 'age', 'sex'
      '1', '12', '男'
      '2', '24', '女'
]
複製代碼

const EXCEL = class {
  construct () {}
  /**
   * [exportsCSV 導出數據到CSV]
   * @param  {Array}  [_headers=[]]   [表頭]
   * @param  {Array}  [_body=[]]      [內容]
   * @param  {String} [name='excel'}] [文件名]
   * @return {[type]}                 [無]
   */
  exportsCSV ({_headers = [], _body = [], name = 'csv', callback = function () {}}) {
    // _headers = ['id', 'age', 'sex']
    // _body = [
    //   {
    //     'id': '1',
    //     'age': 12,
    //     'sex': '男'
    //   },
    //   {
    //     'id': '2',
    //     'age': 24,
    //     'sex': '女'
    //   },
    //   ......
    // ]
    name = 'test'
    const headers = _headers.join() + '\n' // 格式化表頭
    const body = _body.map(item => { // 格式化表內容
      return Object.values(item).join() + '\n'
    })
    const output = headers.concat(body) // 合併

    const BOM = '\uFEFF'
    // 建立一個文件CSV文件
    var blob = new Blob([BOM + output], {type: 'text/csv'})
    // IE
    if (navigator.msSaveOrOpenBlob) {
      // 解決大文件下載失敗
      // 保存到本地文件
      navigator.msSaveOrOpenBlob(blob, `${name}.csv`)
    } else {
      // let uri = encodeURI(`data:text/csv;charset=utf-8,${BOM}${output}`)
      let downloadLink = document.createElement('a')
      // downloadLink.href = uri
      downloadLink.setAttribute('href', URL.createObjectURL(blob)) // 由於url有最大長度限制，encodeURI是會把字符串轉化爲url，超出限制長度部分數據丟失致使下載失敗,爲此我採用建立Blob（二進制大對象）的方式來存放緩存數據，具體代碼以下：
      downloadLink.download = `${name}.csv`
      document.body.appendChild(downloadLink)
      downloadLink.click()
      document.body.removeChild(downloadLink)
    }
    callback()
  }
}
exports.defalut = new EXCEL()
複製代碼