纯前端实现表格导出，支持1000条以上数据

采用vue组件实现，原理大致是： 先通过接口请求到所有的数据，对数据处理之后转化成base64，通过uri数据导出。

项目源码地址

github地址: https://github.com/monoplasty/vue-batch-export

工具函数

// 创建导出数据模板
function CreateTemplate({
  data,
  type,
  customize,
  excelListRows,
  excelTotalAmount,
}) {
  let columns = [];
  let table = null;
  const listArray = [];
  const tableArr = [];
  const {
    list
  } = data;
  switch (type) {
    case 'joiners':
      columns = [{
          title: '序号',
          dataIndex: 'index',
          key: 'index',
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          key: 'mobile',
        },
        {
          title: '当前价格',
          dataIndex: 'current_price',
          key: 'current_price',
        },
        {
          title: '完成时间',
          dataIndex: 'update_time',
          key: 'update_time',
        },
        {
          title: '标记',
          dataIndex: 'is_exchanged',
          key: 'is_exchanged',
        },
        {
          title: '报名时间',
          dataIndex: 'create_time',
          key: 'create_time',
        },
      ];
      break;
    // 每增加一个类型，需要配置表头数据
    case 'groupgoods-joiners':
      columns = [{
          title: '序号',
          dataIndex: 'index',
          key: 'index',
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          key: 'mobile',
        },
        {
          title: '身份',
          dataIndex: 'leader',
          key: 'leader',
        },
        {
          title: '报名时间',
          dataIndex: 'created_at',
          key: 'created_at',
        },
      ];
    default:
      break;
  }
  for (let i = 0; i < excelTotalAmount; i++) {
    listArray.push(list.slice(i * excelListRows, (i + 1) * excelListRows));
  }
  for (let n = 0; n < excelTotalAmount; n++) {
    ((n) => {
      table = document.createElement('table');
      const thead = document.createElement('thead');
      const theadTr = document.createElement('tr');
      const theadTd = columns.map((ele, index) => {
        const th = `${ele.title}`;
        return th;
      });
      theadTr.innerHTML = theadTd.join('');
      thead.appendChild(theadTr);
      const tbody = document.createElement('tbody');
      const tbodyTrs = (listArray[n] || []).map((ele, index) => {
        const trTds = [];
        columns.forEach((e) => {
          if (e.render) {
            trTds.push(`${e.render(ele, ((excelListRows * n) + index))}`);
          } else {
            trTds.push(`${ele[e.dataIndex]}`);
          }
        });
        return `${trTds.join('')}`;
      });
      tbody.innerHTML = tbodyTrs.join('');
      table.appendChild(thead);
      table.appendChild(tbody);
      const uri = 'data:application/vnd.ms-excel;base64,';
      const template = '' +
        '' +
        '' +
        '' +
        '{table}';
      const ctx = {
        worksheet: name || 'Worksheet',
        table: table.innerHTML,
      };
      const excelUrl = uri + base64(format(template, ctx));
      tableArr.push(excelUrl);
    })(n);
  }
  return {
    tableArr,
    excelTotalAmount,
  };
}

使用

直接使用lib目录里的代码作为一个组件，进行引用

import BatchExport from './batch-export.vue'

说明

使用过程总需要调用后台接口获取表格数据，如总数据大于 1000 则会生成多个表格。
欢迎共同讨论，给出建议。 直接留言 或 issue