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()
复制代码