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

最新推荐文章于 2024-05-13 01:52:35 发布

monoplasty

最新推荐文章于 2024-05-13 01:52:35 发布

阅读量1.9k

点赞数 1

分类专栏： javascript Vue 文章标签：前端导出execl 导出表格导出数据

本文链接：https://blog.csdn.net/monoplasty/article/details/90213324

版权

Vue 同时被 2 个专栏收录

7 篇文章 2 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

纯前端实现表格导出，支持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 = `<th style='border: 1px solid #000;text-align: center;'>${ele.title}</th>`;
        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(`<td style='border: 1px solid #000;text-align: center;'>${e.render(ele, ((excelListRows * n) + index))}</td>`);
          } else {
            trTds.push(`<td style='border: 1px solid #000;text-align: center;'>${ele[e.dataIndex]}</td>`);
          }
        });
        return `<tr>${trTds.join('')}</tr>`;
      });
      tbody.innerHTML = tbodyTrs.join('');
      table.appendChild(thead);
      table.appendChild(tbody);
      const uri = 'data:application/vnd.ms-excel;base64,';
      const template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">' +
        '<head>' +
        '<!--[if gte mso 9]>' +
        '<xml>' +
        '<x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' +
        '<x:Name>{worksheet}</x:Name>' +
        '<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>' +
        '</x:ExcelWorkbook>' +
        '</xml>' +
        '<![endif]-->' +
        '</xml>' +
        '<meta charset="UTF-8"></head><body><table>{table}</table></body></html>';
      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

monoplasty

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
纯前端实现表格导出，支持1000条以上数据

纯前端实现表格导出，支持1000条以上数据项目源码地址工具函数使用说明采用vue组件实现，原理大致是：先通过接口请求到所有的数据，对数据处理之后转化成base64，通过uri数据导出。项目源码地址github地址: https://github.com/monoplasty/vue-batch-export工具函数// 创建导出数据模板function CreateTemplate(...
复制链接

扫一扫

专栏目录