JS实现 CSV 文件导出功能

r囧r小猫 2022-01-20 05:47 325阅读 0赞

#### 要实现的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()
    复制代码