美文网首页
使用 xlsx 实现 csv 大文件导出功能

使用 xlsx 实现 csv 大文件导出功能

作者: monkeyfly36 | 来源:发表于2018-09-06 14:19 被阅读0次

    安装xlsx
    cnpm install xlsx

    JS:

    import XLSX from 'xlsx'
    const EXCEL = class {
      construct () {}
      /**
       * [exportsEXCL 导出数据到excel]
       * @param  {Array}  [_headers=[]]   [表头]
       * @param  {Array}  [_body=[]]      [内容]
       * @param  {String} [name='excel'}] [文件名]
       * @return {[type]}                 [无]
       */
      exportsEXCL ({_headers = [], _body = [], name = 'excel'}) {
        // 获取header和body
        const header = _headers
          .map((v, i) => Object.assign({}, {v, position: String.fromCharCode(65 + i) + 1}))
          .reduce((prev, value) => Object.assign({}, prev, {[value.position]: {v: value.v}}), {})
        const body = _body
          .map((v, i) => _headers.map((k, j) => Object.assign({}, { v: v[k], position: String.fromCharCode(65 + j) + (i + 2) }))) //!!!
          .reduce((prev, value) => prev.concat(value))
          .reduce((prev, value) => Object.assign({}, prev, {[value.position]: {v: value.v}}), {})
        // 合并headers和data
        const output = Object.assign({}, header, body)
        // 获取所有单元格位置
        const outputPos = Object.keys(output)
        // 计算出范围
        const ref = outputPos[0] + ':' + outputPos[outputPos.length - 1]
        // 构建 workbook 对象
        const wb = {
          SheetNames: ['mySheet'],
          Sheets: {
            'mySheet': Object.assign({}, output, { '!ref': ref })
          }
        }
        // 导出 Excel
        XLSX.writeFile(wb, `${name}.xlsx`)
      }
    
      /**
       * [exportsCSV 导出数据到CSV] ---解决大数据下载
       * @param  {Array}  [_headers=[]]   [表头]
       * @param  {Array}  [_body=[]]      [内容]
       * @param  {String} [name='excel'}] [文件名]
       * @return {[type]}                 [无]
       */
      exportsCSV ({_headers = [], _body = [], name = 'csv', callback = function () {}}) {
        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 downloadLink = document.createElement('a')
          // 因为url有最大长度限制,encodeURI是会把字符串转化为url,超出限制长度部分数据丢失导致下载失败,
          // 为此采用创建Blob(二进制大对象)的方式来存放缓存数据,具体代码如下:
          downloadLink.setAttribute('href', URL.createObjectURL(blob))
          downloadLink.download = `${name}.csv`
          document.body.appendChild(downloadLink)
          downloadLink.click()
          document.body.removeChild(downloadLink)
        }
        callback()
      }
    }
    exports.defalut = new EXCEL()
    

    注: 使用 Blob 和 msSaveBlob 以本地方式保存文件(任意大小):https://blog.csdn.net/p312011150/article/details/78930976

    相关文章

      网友评论

          本文标题:使用 xlsx 实现 csv 大文件导出功能

          本文链接:https://www.haomeiwen.com/subject/vtlxgftx.html