前端导出excel,yarn add exceljs

import Excel from 'exceljs';
async export(fileName, title, columns, data, fileType = 'xlsx') {
    const workbook = new Excel.Workbook();
    const sheet = workbook.addWorksheet(title);
    const keyValueData = {};
    sheet.columns = columns.map(item => {
      keyValueData[item.key] = item;
      return {
        header: item.title,
        key: item.key,
        width: item.width || 100
      };
    });
    const rows = [];
    data.forEach(item => {
      const obj = {};
      for (const key in item) {
        if (keyValueData[key]) {
          const value = keyValueData[key].value ? keyValueData[key].value(item, item[key]) : item[key];
          obj[key] = value;
        }
      }
      rows.push(obj);
    });
    sheet.addRows(rows);
    const res = await workbook[fileType].writeBuffer();
    // util.blobToFile(fileName, res, fileType === 'csv'); // 如果导出乱码, 请改这里, 导出的head设置问题
    this.blobToFile(fileName, res, fileType === 'csv'); // 如果导出乱码, 请改这里, 导出的head设置问题
  },
 
    /**
   * blob下载文件
   * @param fileName
   * @param blob
   */
  blobToFile(fileName, b, isUtf8) {
    if (isUtf8 === true) {
      b = '\uFEFF' + b;
    }

    const blob = new Blob([b]);
    if ('download' in document.createElement('a')) { // 非IE下载
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';

      if (isUtf8 === true) {
        elink.href = URL.createObjectURL(blob, { type: 'text/csv;charset=utf-8' });
      } else {
        elink.href = URL.createObjectURL(blob);
      }

      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    } else { // IE10+下载
      navigator.msSaveBlob(blob, fileName);
    }
  },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值