vue3 实现导出 xlsx在 Vue 3 中实现前端 Excel 导出功能，可以利用 xlsx 和 xlsx-styl

在 Vue 3 中实现前端 Excel 导出功能，可以利用 xlsx 和 xlsx-style 这两个库来创建和样式化 Excel 文件。xlsx 库可以用来创建和解析 Excel 文件，而 xlsx-style 库则允许对 Excel 文件中的单元格进行样式设置。以下是详细的步骤和示例代码，用于在 Vue 3 中实现组件表格的 Excel 导出功能。

1. 准备工作

1.1 安装依赖

首先，你需要安装 xlsx 和 xlsx-style 库。打开终端并运行以下命令：

npm install xlsx xlsx-style

2. 创建导出组件

我们将创建一个 Vue 3 组件，其中包含一个表格和一个按钮用于导出 Excel 文件。

2.1 创建组件文件

在 src/components 目录下创建一个名为 ExportExcel.vue 的文件。

ExportExcel.vue

<template>
  <div>
    <button @click="exportToExcel">导出 Excel</button>
    <table ref="table" border="1">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.city }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
import XLSXStyle from 'xlsx-style';

export default {
  name: 'ExportExcel',
  data() {
    return {
      data: [
        { name: '张三', age: 28, city: '北京' },
        { name: '李四', age: 22, city: '上海' },
        { name: '王五', age: 30, city: '广州' },
      ],
    };
  },
  methods: {
    exportToExcel() {
      // 获取表格元素
      const table = this.$refs.table;

      // 将表格元素转换为工作表
      const ws = XLSX.utils.table_to_sheet(table);

      // 定义样式
      const headerStyle = {
        font: { bold: true },
        fill: { fgColor: { rgb: 'FFFF00' } },
        alignment: { horizontal: 'center' },
      };

      // 应用样式到工作表的头部
      for (let col = 0; col < ws['!cols'].length; col++) {
        const cellAddress = XLSX.utils.encode_cell({ c: col, r: 0 });
        if (ws[cellAddress]) {
          ws[cellAddress].s = headerStyle;
        }
      }

      // 创建工作簿
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      // 导出文件
      XLSXStyle.writeFile(wb, 'exported-data.xlsx');
    },
  },
};
</script>

<style scoped>
/* Optional: Add some styles for the table */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: left;
}
</style>

3. 使用组件

在 src/App.vue 中使用 ExportExcel 组件。

App.vue

<template>
  <div id="app">
    <h1>Vue 3 Excel 导出示例</h1>
    <ExportExcel />
  </div>
</template>

<script>
import ExportExcel from './components/ExportExcel.vue';

export default {
  name: 'App',
  components: {
    ExportExcel
  }
}
</script>

<style>
#app {
  text-align: center;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4. 详细说明

4.1 `XLSX.utils.table_to_sheet(table)`

table_to_sheet 方法将 HTML 表格元素转换为工作表对象。table 是通过 ref 引用的 DOM 元素。

4.2 样式设置

headerStyle 定义了表头单元格的样式。使用 font, fill, 和 alignment 对象设置字体、背景色和对齐方式。

const headerStyle = {
  font: { bold: true },
  fill: { fgColor: { rgb: 'FFFF00' } },
  alignment: { horizontal: 'center' },
};

样式应用到工作表头部的单元格，通过循环设置每个单元格的样式。

4.3 `XLSXStyle.writeFile(wb, 'exported-data.xlsx')`

writeFile 方法将工作簿对象导出为 Excel 文件。文件名为 'exported-data.xlsx'。

5. 总结

通过上述步骤，你可以在 Vue 3 项目中实现一个功能齐全的 Excel 导出组件，支持自定义表格内容和样式。xlsx 和 xlsx-style 库使得在前端创建和样式化 Excel 文件变得简单高效。如果需要更多复杂的功能，比如数据合并、条件格式等，可以进一步探索这两个库的文档。

vue3 实现导出 xlsx