一、先看导出的效果

二、数据格式要求

一般我们拿到的数据都是从接口中请求到的对象数组，在使用数据的时候，是需要转成二维数组。

需要处理成扁平的数据格式：例如：

const rootDataList = ref([
  ["手机", 50, 5000, 30, 3000, 800, 80000],
  ["电视", 47, 5122, 10, 6000, 150, 80000],
  ["电脑", 28, 1254, 60, 5241, 50, 80000],
  ["冰箱", 65, 2589, 81, 3258, 584, 80000],
  ["沙发", 15, 2789, 30, 3258, 54, 80000],
  ["洗衣机", 205, 25589, 31, 3258, 84, 80000],
]);

数据必须是这种格式，如果不是需要自己处理一下。

三、下插件

使用的是“xlsx-js-style”插件：

npm install xlsx-js-style

四、开始使用：

直接复制完整Demo代码即可查看效果，点击下载按钮会直接下载Excel表到本地。

<template>
  <div>
    <el-button type="success" @click="downLoadExcel">点击下载Excel</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import XLSXS from 'xlsx-js-style';

// 需要导出的数据源 一般我们拿到的是从接口中请求到的对象数组，在使用是需要转成二维数组，
// 表格数据 必须是扁平的数组格式
const rootDataList = ref([
  ["手机", 50, 5000, 30, 3000, 800, 80000],
  ["电视", 47, 5122, 10, 6000, 150, 80000],
  ["电脑", 28, 1254, 60, 5241, 50, 80000],
  ["冰箱", 65, 2589, 81, 3258, 584, 80000],
  ["沙发", 15, 2789, 30, 3258, 54, 80000],
  ["洗衣机", 205, 25589, 31, 3258, 84, 80000],
]);

// 表头数据
// 定义表头，每一行即是一个数组，数组中的元素即是一个个单元格内容。
// 如果单元格不需要样式，那么每个元素类型为字符串即可。如：['一月（2022年01月）'],
// 如果单元格需要样式，那么数组中的元素就需要为一个个对象，在此对象中定义单元格的样式等等。
// 这里只针对第一行进行举例：
const headerData = ref([
  // 第一行，需要样式，则数组中元素为对象，进行定义样式。
  [
    {
      v: '十月（2024年10月）',
      t: 's',
      s: {
        // font 字体属性
        font: {
          bold: true,
          sz: 18,
          name: '宋体',
        },
        // alignment 对齐方式
        alignment: {
          vertical: 'center', // 垂直居中
          horizontal: 'center', // 水平居中
        },
        // fill 颜色填充属性
        fill: {
          fgColor: { rgb: 'fbc118' },
        },
      },
    },
  ],
  ['商品名称', '手机客户端', '', '电脑客户端', '', '总计', ''],
  ['', '销售数量', '销售金额', '销售数量', '销售金额', '总计数量', '总计金额']
]);


// Excel下载方法
const downLoadExcel = () => {
  // 整理好的表头 + 表格数据，给每个单元格添加居中对齐样式
  const resolveData = [
    ...headerData.value,
    // 除了表头 让所有的内容居中显示
    ...rootDataList.value.map(row =>
      row.map(cell => ({
        v: cell,
        s: {
          alignment: {
            vertical: 'center',
            horizontal: 'center',
          },
        },
      }))
    ),
  ];
  // console.log(resolveData, '整理好的表头+表格数据');

  // 转化数据 aoa_to_sheet是将【一个二维数组】转化成 sheet
  const sheet = XLSXS.utils.aoa_to_sheet(resolveData);

  // 如果需要设置单元格合并，则定义好merges ，添加到 sheet 中。
  // merges 为一个对象数组，每个对象设定了单元格合并的规则。
  // 即为一个规则，s:开始位置,e:结束位置,r:行,c:列
  const merges = [
    { s: { r: 0, c: 0 }, e: { r: 0, c: 6 } },
    { s: { r: 1, c: 1 }, e: { r: 1, c: 2 } },
    { s: { r: 1, c: 3 }, e: { r: 1, c: 4 } },
    { s: { r: 1, c: 5 }, e: { r: 1, c: 6 } },
    { s: { r: 1, c: 0 }, e: { r: 2, c: 0 } },
  ];
  // 将merges添加到sheet中
  sheet['!merges'] = merges;

  // 设置列宽 cols 为一个对象数组，依次表示每一列的宽度。
  const cols = [
    { wch: 10 }, // 第一列宽
    { wch: 10 }, // 第二列宽
    { wch: 10 }, // ......
    { wch: 10 },
    { wch: 10 },
    { wch: 10 },
    { wch: 10 }
  ];
  // 将cols添加到sheet中
  sheet['!cols'] = cols;

  // 设置行高 rows 为一个对象数组，依次表示每一行的高度
  // [第一行，第二行，第三行，......] 不设置就默认
  const rows = [
    { hpx: 30 },
    { hpx: 20 },
    { hpx: 20 }
  ];
  // 将rows添加到sheet中
  sheet['!rows'] = rows;

  // console.log(sheet, '整理好的sheet数据');

  // 创建虚拟的workbook  Excel整个表格可称为 workbook。里面的每张表分别是 sheet
  const workbook = XLSXS.utils.book_new();

  // 向 workbook 工作薄中添加 sheet表 一个 workbook 允许添加多个 sheet，即可以同时创建多个表
  XLSXS.utils.book_append_sheet(workbook, sheet, 'sheet1');
  // XLSXS.utils.book_append_sheet(workbook, sheet, 'sheet2');

  // 导出 workbook 注意：定义导出 excel 的名称时需要加上后缀 .xlsx
  XLSXS.writeFile(workbook, '工作表格.xlsx'); // 导出 workbook
};

</script>