vue2项目使用exceljs多表头导出

qq_41282779

于 2024-02-26 18:46:34 发布

阅读量829

点赞数 8

文章标签： vue excel

本文链接：https://blog.csdn.net/qq_41282779/article/details/136285169

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

因为项目需求要用到前端导出功能，粗略比较了几个导出插件之后，决定使用exceljs插件，至少能够满足样式、数据格式等的需求。

鉴于个人水平和时间限制，目前只是初步实现了组件化，将表头、数据按要求格式传递到组件中即可导出需要的excel文件。代码质量、实现思路存在一定的缺陷，后续有时间会继续优化，如果大家有更好的实现，感谢留言！

组件导出文件效果如下：

一级表头

二级表头

三级表头

提示：以下是本篇文章正文内容，下面案例可供参考

一、插件安装

yarn add exceljs
yarn add file-saver

二、数据准备

1、前台表格表头数据

const data = [
    {
      prop: "AA",
      label: "地区",
      minWidth: "150px"
    },
    {
      prop: "BB",
      label: "归集额",
      minWidth: "100px"
    },
    {
      label: "对下调入",
      children: [
        {
          prop: "CC",
          label: "资金",
          minWidth: "90px"
        },
        {
          prop: "DD",
          label: "占比",
          minWidth: "80px"
        },
      ],
    },
    {
      label: "本级调入",
      children: [
        {
          prop: "EE",
          label: "资金",
          minWidth: "100px"
        },
        {
          prop: "FF",
          label: "占比",
          minWidth: "80px"
        }
      ]
    }
  ]

2、传递到组件前的数据处理

// 表头数据预处理函数
const headersPreprocess = function (businessAttr) {
  let columns = deepClone(businessAttr);
  let maxLevel = 0;
  let baseCols = [];
  function columnsProcess(columns = [], level = 0, path = "") {
    ++level;
    maxLevel = maxLevel < level ? level : maxLevel;
    for (let i = 0; i < columns.length; i++) {
      // 获取列的路径，用于后面表头数据格式处理
      columns[i].path = emptyCheck(path) ? path + "_" + columns[i].label : columns[i].label;
      columnProcess(columns[i]);
      if (columns[i].children) {
        columnsProcess(columns[i].children, level, columns[i].path);
      } else {
        baseCols.push({
          prop: columns[i].prop,    // 当前字段的prop值
          path: columns[i].path,    // 当前字段的路径
          level: level,             // 当前列所处层级
          width: columns[i].width || columns[i].minWidth,    // 列宽
        });
        delete columns[i].path;
      }
    }
  }
  columnsProcess(columns, 0);
  return {
    columns: columns,     // 前台表格表头用到的数据
    depth: maxLevel,      // 树形结构表头的最大层级数--导出功能所需
    baseCols: baseCols    // 底层字段数据集--导出功能所需
  };
};

得到的baseCols数据

//得到的baseCols数据
[
    {
        level: 1,
        path:  "地区",
        prop: "AA",
        width: "150px"
    },
    {
        level: 1,
        path:  "资金归集额",
        prop: "BB",
        width: "100px"
    },
    {
        level: 2,
        path:  "对下调入_资金",
        prop: "CC",
        width: "90px"
    },
    {
        level: 2,
        path:  "对下调入_占比",
        prop: "DD",
        width: "80px"
    },
    {
        level: 2,
        path:  "本级调入_资金",
        prop: "DD",
        width: "100px"
    },
    {
        level: 2,
        path:  "本级调入_占比",
        prop: "DD",
        width: "80px"
    },
]