VUE3 xlxs导出 包括单元和合并

vue3中 安装 xlsx

npm install xlsx

 vue3项目中使用xlsx

  import * as XLSX from 'xlsx';

这里使用 * 因为xlsx并没有export default 对象，需要用别称引用

<template>
  <div class="md:flex" @click="fireVueError"> 导出 </div>
</template>
<script lang="ts" setup>
  import * as XLSX from 'xlsx';
  //   // 需要导出的数据
  var aoa = [
    ['姓名', '性别', null, '注册时间', '注册时间', '注册时间', '注册时间', '注册时间', '注册时间'],
    ['姓名', '性别1', null, '注册时间', '注册时间', '注册时间', '注册时间', '注册时间', '注册时间'],
    ['张三', '男', 18, new Date(), '张三', '男', 18, new Date(), '张三', '男', 18, new Date()],
    ['李四', '女', 22, new Date()],
  ]; // 导出的表格名称
  const filename = '导出表格.xlsx';
  // Excel第一个sheet的名称
  const ws_name = 'Sheet1';

  console.log(XLSX);
  function fireVueError() {
    const wb = XLSX.utils.book_new(); // 创建一个工作簿对象：

    const ws = XLSX.utils.aoa_to_sheet(aoa);
    // s: {r: 开始行号, c: 开始列号},
    // e: {r: 结束行号,   c: 结束列号}

    // - s: {r:0, c:5} 表示 F1 单元格(第 0 行,第 5 列)
    // - e: {r:0, c:6} 表示 G1 单元格(第 0 行,第 6 列)

    // A1:A2
    // - s: {r:0, c:0} 表示 A1 单元格(第 0 行,第 0 列)
    // - e: {r:1, c:0} 表示 A2 单元格(第 1 行,第 0 列)

    // I1:I2 合并
    // s: { r: 0, c: 8 }  表示 I1 单元格(第 0 行,第 8 列)
    // e: { r: 1, c: 8 }  表示 I2 单元格(第 1 行,第 8 列)

    ws['!merges'] = [
      { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } }, // A1:A2 合并
      { s: { r: 0, c: 1 }, e: { r: 0, c: 2 } }, // B1:C1 合并
      { s: { r: 0, c: 5 }, e: { r: 0, c: 6 } }, // B1:C1 合并
      { s: { r: 0, c: 8 }, e: { r: 1, c: 8 } }, // I1:I2 合并
    ];

    XLSX.utils.book_append_sheet(wb, ws, ws_name); // 将数据添加到工作薄
    XLSX.writeFile(wb, filename); // 导出Excel
  }
</script>

合并单元格重点在于 对单元的描述

s: {r: 开始行号, c: 开始列号},  从0开始计算

e: {r: 结束行号, c: 结束列号},  从0开始计算

// - s: {r:0, c:5} 表示 F1 单元格(第 0 行,第 5 列)

// - e: {r:0, c:6} 表示 G1 单元格(第 0 行,第 6 列)

// A1:A2

// - s: {r:0, c:0} 表示 A1 单元格(第 0 行,第 0 列)

// - e: {r:1, c:0} 表示 A2 单元格(第 1 行,第 0 列)

// I1:I2 合并

// s: { r: 0, c: 8 } 表示 I1 单元格(第 0 行,第 8 列)

// e: { r: 1, c: 8 } 表示 I2 单元格(第 1 行,第 8 列)