使用ExcelJS实现纯前端导出excel

最新推荐文章于 2024-01-10 10:30:50 发布

让代码飞1926

最新推荐文章于 2024-01-10 10:30:50 发布

阅读量567

点赞数 7

分类专栏：问题和解决办法 Vue 文章标签：前端

本文链接：https://blog.csdn.net/qq_40596257/article/details/135206183

版权

问题和解决办法同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

Vue

14 篇文章 1 订阅

订阅专栏

可能很多前端同学在做导出的时候都是掉一个接口，然后获取到流，然后创建blob下载，但是有些数据量小的，完全可以前端来做，或者后端不愿意做的时候，这时候前端同学就要来做这件事情。今天就分享一个刚使用过的包来导出vue2和3通用

第一步安装

npm install exceljs file-saver

第二步导入

在要导出的vue文件内

const ExcelJS = require("exceljs");
import { saveAs } from "file-saver";

第三步使用

const exportToExcel = () => {
  // 创建工作簿
  const _workbook = new ExcelJS.Workbook();
  // 添加工作表
  const _sheet1 = _workbook.addWorksheet("sheet1",{
  //设置为A4纸
    pageSetup:{paperSize: 9, orientation:'landscape'}
  });
  //设置页边距
  _sheet1.pageSetup.margins = {
    left: 0.7, right: 0.7,
    top: 0.75, bottom: 0.75,
    header: 0.3, footer: 0.3
  };
  _sheet1.pageSetup.margins = {
    horizontalCentered:true
  };

  //涉资表头数据
  _sheet1.columns = state.dialogColumns.map((item)=>{
    return {
      header:item.label,
      key:item.props,
      width:item.wch
    }
  })
  // 设置表格数据
  _sheet1.addRows(state.dialogTableData);
  //在表头上面再追加的两行
  _sheet1.spliceRows(1,0,[`日期：${dayjs(state.dialogDate).format('YYYY-MM-DD')}`,'','','','','','车辆调度员:','','','',''])
  _sheet1.spliceRows(1,0,['车辆运行记录'])

  //合并单元格
  _sheet1.mergeCells("A1:K1");
  _sheet1.mergeCells("A2:F2");
  _sheet1.mergeCells("G2:K2");

  //设置边框和行高
  _sheet1._rows.forEach((item,index)=>{
    item.border =  {
      top: {
        style: 'thin'
      },
      left: {
        style: 'thin'
      },
      bottom: {
        style: 'thin'
      },
      right: {
        style: 'thin'
      },
    };
    //其他行
    _sheet1.getRow(index+1).height = 30
  })
  // 设置字体大小
  _sheet1.getRow(1).font = {
    size: 14,
  };

  // 导出表格
  _workbook.xlsx.writeBuffer().then((buffer) => {
    let _file = new Blob([buffer], {
      type: "application/octet-stream",
    });
    saveAs(_file, "车辆运行计划.xlsx");
  });
}

特殊样式设置可以查看官网，使用就这么简单，欢迎交流~~