Vue使用Export2Excel导出包含多Sheet的Excel文件

最新推荐文章于 2025-03-13 10:19:08 发布

GoodLSS

最新推荐文章于 2025-03-13 10:19:08 发布

阅读量6.1k

点赞数 15

分类专栏： VUE 文章标签： vue excel css

本文链接：https://blog.youkuaiyun.com/qq_36357384/article/details/108145542

版权

本文介绍了在Vue项目中使用Export2Excel库导出包含多个工作表的Excel文件。首先，展示了单Sheet Excel的导出原理和方法，接着详细讲解如何通过循环创建多个Sheet，包括数据的格式化、表头的处理以及工作簿的添加。最后，通过实例展示了如何处理展开的数据并将其与其他数据一起导出，实现多Sheet效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章不在赘述如何安装相关依赖以及导入.js文件。如果有需要的小伙伴可以搜一下即可有，很多文章都有手把手教程。好，直接步入正轨！首先我们先来看看在我们导入的Export2excel.js文件中，有哪些是我们在导出时需要用到的方法(在实现多Sheet的excel文件之前，我们先来了解下单工作簿的excel文件是如何导出的)
下面的导出方法中需要用到的数据和我们在网页中渲染到table上的数据不同，需要格式化

/**
 *  格式数据
 *  @filterVal  格式头
 *  @tableData  用来格式的表格数据
 */
formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            }

在这里插入图片描述

不难看出，formatJson方法的参数为我们需要对应表格输出的数据和源数据；
以这个代码为例，我们需要的表格数据为’name’,‘count’。而格式化后的数据就是将我们需要的数据整理了出来！

export function export2Excel(th, jsonData, defaultTitle) {
   

  /* original data */

  var data = jsonData;
  data.unshift(th);
  var ws_name = "SheetJS";

  var wb = new Workbook(), ws = sheet_from_array_of_arrays(data

最低0.47元/天解锁文章