美文网首页
使用 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