前言

在 Web 开发领域，数据导出是一项极为常见的业务需求。传统的数据导出方案往往依赖后端服务器生成文件，然后前端再进行下载操作。然而，在某些特定场景下，这种方式可能会增加服务器的压力，并且在响应速度上可能无法满足用户的期望。相比之下，纯前端导出方案具有显著的优势，它能够在不依赖后端的情况下直接在前端完成文件的生成和导出，不仅能显著提升用户体验，还能有效降低服务器的压力。本文将详细地手把手教你如何在 Vue3 项目中，使用xlsx.js库实现专业级的 Excel 导出功能。

一、准备工作

在开始实现 Excel 导出功能之前，我们需要完成一些必要的准备工作：

1、创建 Vue3 项目：如果你还没有 Vue3 项目，可以使用 Vue CLI 或 Vite 来快速创建一个新的项目。例如，使用 Vite 创建项目的命令如下：

npm init vite@latest my-vue3-project -- --template vue

cd my-vue3-project

npm install

2、安装xlsx.js库：xlsx.js是一个功能强大的 JavaScript 库，用于处理 Excel 文件的读写操作。在项目根目录下，使用以下命令进行安装：

npm install xlsx

3、安装必要的依赖（可选）：为了方便处理时间格式，我们可以安装dayjs库。在项目根目录下，使用以下命令进行安装：

npm install dayjs

二、具体实现

2.1 HTML 代码

在 Vue 组件的模板部分，我们需要添加一个按钮，用于触发 Excel 导出操作。同时，为了给用户提供更好的交互体验，我们还可以添加一个加载状态。以下是示例代码：

<template>
  <button @click="exportFile" :loading="loading">
    导出收货地址
  </button>
</template>

在上述代码中，@click指令绑定了exportFile方法，当用户点击按钮时，会触发该方法进行 Excel 导出操作。loading是一个响应式变量，用于控制按钮的加载状态。

2.2 Script 代码

在<script setup>部分，我们将实现具体的 Excel 导出逻辑。以下是完整的代码示例：

<script setup>
import { ref } from 'vue';
import { read, utils, writeFileXLSX } from 'xlsx';
import dayjs from 'dayjs';
import { message } from 'element-plus';

// 定义加载状态
const loading = ref<boolean>(false);

// 格式化时间的函数
const formatTime = (timestamp, format) => {
  return dayjs(timestamp).format(format);
};

// 导出文件的方法
const exportFile = async () => {
  // 开始加载
  loading.value = true;

  // 定义Excel表头和说明信息
  let excelData = [
    ["说明：\n1. 仅支持导出需要发货商品信息；\n2. 订单编号相同则表明为同一订单"],
    ['订单编号', '商品名称', '订单状态', '交易时间', '收货人', '手机号', '省', '市', '区', '详细地址']
  ];

  // 模拟订单数据
  let data = [
    [
      "2023091114471160970",
      "需要发货",
      "pendingShipment",
      "1694414831531",
      "哈哈哈啊",
      "15353327494",
      "浙江省",
      "杭州市",
      "滨江区",
      "长河路阿里园区BXX软件公司32楼"
    ]
  ];

  // 将模拟数据合并到Excel数据中
  excelData = excelData.concat(data);

  // 创建一个新的工作簿
  const wb = utils.book_new();

  // 将二维数组转换为工作表
  const worksheet = utils.aoa_to_sheet(excelData);

  // 定义合并单元格的范围
  const mergeCellRange = { s: { r: 0, c: 0 }, e: { r: 0, c: 9 } };
  worksheet['!merges'] = [mergeCellRange];

  // 设置行高
  worksheet['!rows'] = [];
  for (let i = 0; i < 1; i++) {
    worksheet['!rows'][i] = { hpx: 40 };
  }

  // 设置列宽
  worksheet['!cols'] = [];
  for (let i = 0; i < 10; i++) {
    worksheet['!cols'][i] = { wpx: 140 };
  }

  // 将工作表添加到工作簿中
  utils.book_append_sheet(wb, worksheet, 'Sheet 1');

  try {
    // 写入文件并导出
    writeFileXLSX(wb, `商城收货地址${formatTime(Date.now(), 'YYYYMMDDHHmmss')}.xlsx`);
  } catch (err) {
    // 导出失败提示
    message.error('导出失败');
  }

  // 结束加载
  loading.value = false;
};
</script>

代码解释：

1. 导入必要的模块：导入xlsx.js库的相关方法，以及dayjs库用于处理时间格式，message组件用于显示提示信息。
2. 定义响应式变量：使用ref定义loading变量，用于控制按钮的加载状态。
3. 定义格式化时间的函数：formatTime函数用于将时间戳格式化为指定的格式。
4. 定义导出文件的方法：
   • 设置加载状态为true，表示开始导出操作。
   • 定义 Excel 表头和说明信息，并将模拟数据合并到 Excel 数据中。
   • 创建一个新的工作簿，并将二维数组转换为工作表。
   • 定义合并单元格的范围，并设置行高和列宽。
   • 将工作表添加到工作簿中。
   • 尝试将工作簿写入文件并导出，如果导出失败，显示错误提示信息。
   • 设置加载状态为false，表示导出操作结束。

三、效果图

四、总结

通过以上步骤，我们成功地在 Vue3 项目中使用xlsx.js库实现了 Excel 导出功能。这种纯前端的导出方案不仅提升了用户体验，还降低了服务器的压力。在实际项目中，你可以根据具体需求对代码进行扩展和优化，例如从后端获取真实的数据、处理更多的样式和格式等。希望本文能对你有所帮助，如果你在实现过程中遇到任何问题，欢迎在评论区留言交流。