vue纯前端使用exceljs导出excel文件手把手教程，非官方文档直粘

Vue 3 项目中使用 ExcelJS 导出 Excel 文件的手把手教程

在现代 web 开发中，导出 Excel 文件的需求越来越普遍。而 ExcelJS 是一个功能强大且易于使用的 JavaScript 库，可以帮助我们轻松地生成和操作 Excel 文件。在这篇文章中，我们将使用 Vue 3 和 ExcelJS 进行手把手的学习，了解如何将数据导出为 Excel 文件。

第一步：创建 Vue 项目

如果你还没有创建 Vue 项目，可以使用 Vue CLI 来创建一个新的项目：

npm install -g @vue/cli
vue create excel-export-demo
cd excel-export-demo

选择你想要的配置，这里建议选择 Vue 3。

第二步：安装 ExcelJS

使用 npm 安装 ExcelJS：

npm install exceljs

第三步：编写导出 Excel 的功能

在 src/components 目录下，创建一个新的组件，例如 ExcelExport.vue，并在其中实现导出 Excel 的逻辑。

<template>
  <div>
    <h1>导出 Excel 示例</h1>
    <button @click="exportExcel">导出 Excel</button>
  </div>
</template>

<script>
import * as ExcelJS from 'exceljs';

export default {
  name: 'ExcelExport',
  methods: {
    async exportExcel() {
      // 创建一个工作簿
      const workbook = new ExcelJS.Workbook();
      // 创建一个工作表
      const worksheet = workbook.addWorksheet('我的工作表');

      // 设置表头
      worksheet.columns = [
        { header: '姓名', key: 'name', width: 20 },
        { header: '年龄', key: 'age', width: 10 },
        { header: '城市', key: 'city', width: 15 }
      ];

      // 添加一些数据
      worksheet.addRow({ name: '张三', age: 30, city: '北京' });
      worksheet.addRow({ name: '李四', age: 25, city: '上海' });
      worksheet.addRow({ name: '王五', age: 28, city: '广州' });

      // 设置列的样式
      worksheet.getRow(1).font = { bold: true };

      // 滚动设置
      worksheet.autoFilter = 'A1:C1';

      // 导出为 Excel 文件
      const buffer = await workbook.xlsx.writeBuffer();
      const blob = new Blob([buffer], { type: 'application/octet-stream' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = '数据.xlsx';
      link.click();
    }
  }
};
</script>

<style scoped>
button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

第四步：使用组件

在 src/App.vue 或其他组件中使用刚才创建的 ExcelExport 组件：

<template>
  <div id="app">
    <ExcelExport />
  </div>
</template>

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

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

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

第五步：启动项目

完成以上步骤后，你可以通过以下命令启动 Vue 项目：

npm run serve

访问 http://localhost:8080，你将看到一个导出 Excel 的按钮。点击后，Excel 文件将会被下载到本地。

总结

通过这个教程，你学习了如何在 Vue 3 项目中使用 ExcelJS 导出 Excel 文件。你可以根据需要修改工作表的样式、内容和结构，进一步扩展功能。希望这个教程对你有所帮助！