vue3中导出excel(xlsx)多表头的插件？

Question

用vue3做的项目，需要能导出这种多表头格式的功能。

Answer 1

用sheetjs吧

Answer 2

在Vue 3中导出Excel文件（.xlsx格式）可以使用现有的JavaScript库，如xlsx。在xlsx中，可以使用工作表的header属性来定义多级标题。以下是一个示例代码，可以导出具有多级标题的Excel文件：

import XLSX from 'xlsx'

// 数据示例
const data = [
  ["Alice", "Math", 98],
  ["Bob", "Math", 85],
  ["Charlie", "Math", 75],
  ["Alice", "Science", 92],
  ["Bob", "Science", 88],
  ["Charlie", "Science", 80]
]

// 多级表头示例
const headers = [
  ["", "", "Test Scores"],
  ["Name", "Subject", "Score"]
]

// 创建工作表
const ws = XLSX.utils.aoa_to_sheet([headers, ...data])
ws['!rows'] = [{ hpx: 25 }, ...ws['!rows']] // 行高

// 设置多级表头
ws['!merges'] = [
  // 第一行
  { s: { r: 0, c: 2 }, e: { r: 0, c: 4 } },
  // 第二行
  { s: { r: 1, c: 0 }, e: { r: 2, c: 0 } },
  { s: { r: 1, c: 1 }, e: { r: 2, c: 1 } },
  { s: { r: 1, c: 2 }, e: { r: 1, c: 4 } }
]

// 设置多级表头样式
ws['A1'].s = { font: { bold: true } } // 设置字体加粗
ws['C1'].s = { font: { bold: true } } // 设置字体加粗
ws['A2'].s = { font: { bold: true } } // 设置字体加粗
ws['B2'].s = { font: { bold: true } } // 设置字体加粗
ws['C2'].s = { font: { bold: true } } // 设置字体加粗

// 创建工作簿并添加工作表
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, "Test Scores")

// 导出Excel文件
XLSX.writeFile(wb, "test-scores.xlsx")

在上面的示例中，我们使用XLSX.utils.aoa_to_sheet()函数将标题和数据合并为一个二维数组，并将其传递给aoa_to_sheet()函数，这样就可以使用headers定义的多级标题来创建工作表，然后使用ws['!merges']属性来定义多级表头。具体而言，我们在s（起始）和e（结束）参数中定义了每个单元格的位置，以便将单元格合并成多级表头，s 和 e 属性中的 r 和 c 代表合并区域左上角单元格的行和列索引。例如，s: { r: 1, c: 0 }表示单元格合并区域的开始位置是第二行第一列的单元格。

此外，我们还设置了一些样式，如字体加粗和行高，以使多级表头更易于阅读。

最后，我们将工作表添加到工作簿中，并使用XLSX.writeFile()函数将工作簿保存为Excel文件。

Answer 3

可以看下这个库 @zurmokeeper/exceljs， 直接提供了多表头的方法 makeColumns，使用方法看下面的说明：https://github.com/zurmokeeper/excelize#column