如何利用Vue和Excel快速生成数据报表

1. 介绍

在日常工作中，我们经常需要根据数据来生成报表，传统的方法是手动计算、排版，效率低下且容易出错。而现在，Vue和Excel等工具的使用可以使制作报表更加高效、准确和方便。

2. 利用Vue和Excel快速生成数据报表的方法

2.1 准备工作

首先，我们需要准备好需要生成报表的数据，这些数据可以来自于数据库、网络请求或者本地文件。在本例中，我们使用了以下数据。

数据格式：

const data = [

  { id: 1, name: 'John', age: 18, gender: 'Male', score: 90 },
  { id: 2, name: 'Mary', age: 20, gender: 'Female', score: 88 },
  { id: 3, name: 'Peter', age: 19, gender: 'Male', score: 85 },
  { id: 4, name: 'Lucy', age: 22, gender: 'Female', score: 92 },
];

这是一个包含个人信息和成绩的数据，我们将用它来生成表格形式的报表。

2.2 安装依赖

首先，我们需要安装Vue和Exceljs这两个依赖，我们可以在项目根目录下使用以下命令进行安装。

命令：

npm install --save vue exceljs

安装完成后，我们可以在main.js中引入Vue和Exceljs。

代码：

import Vue from 'vue';

import ExcelJS from 'exceljs';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
  render: h => h(App),
}).$mount('#app');

2.3 生成表格并导出Excel文件

接下来，我们需要编写代码使用Exceljs生成表格并导出Excel文件。

代码：

methods: {

  generateExcel() {
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('Report');
    // 标题行
    worksheet.addRow(['ID', 'Name', 'Age', 'Gender', 'Score']);
    worksheet.getRow(1).font = { bold: true };
    // 数据行
    this.data.forEach(item => {
      worksheet.addRow([item.id, item.name, item.age, item.gender, item.score]);
    });
    // 生成Excel文件
    workbook.xlsx.writeBuffer().then(buffer => {
      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      saveAs(blob, 'Report.xlsx');
    });
  },
},

上面的代码中，我们先创建了一个新的工作簿，并向其中添加名为"Report"的工作表。接着，我们通过addRow方法向工作表中添加标题行和数据行，并使用getRow和font方法对标题行进行粗体设置。最后，我们将工作簿中的数据写入缓冲区，将缓冲区转为Blob对象，并使用saveAs方法下载Excel文件。

2.4 在Vue组件中调用

最后，我们将以上方法封装到组件中，并在按钮点击事件中调用。

代码：

<template>

  <div class="app">
    <button @click="generateExcel">Generate Report</button>
  </div>
</template>
<script>
import ExcelJS from 'exceljs';
export default {
  name: 'App',
  data() {
    return {
      data: [
        { id: 1, name: 'John', age: 18, gender: 'Male', score: 90 },
        { id: 2, name: 'Mary', age: 20, gender: 'Female', score: 88 },
        { id: 3, name: 'Peter', age: 19, gender: 'Male', score: 85 },
        { id: 4, name: 'Lucy', age: 22, gender: 'Female', score: 92 },
      ],
    };
  },
  methods: {
    generateExcel() {
      const workbook = new ExcelJS.Workbook();
      const worksheet = workbook.addWorksheet('Report');
      // 标题行
      worksheet.addRow(['ID', 'Name', 'Age', 'Gender', 'Score']);
      worksheet.getRow(1).font = { bold: true };
      // 数据行
      this.data.forEach(item => {
        worksheet.addRow([item.id, item.name, item.age, item.gender, item.score]);
      });
      // 生成Excel文件
      workbook.xlsx.writeBuffer().then(buffer => {
        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        saveAs(blob, 'Report.xlsx');
      });
    },
  },
};
</script>

在上面的代码中，我们将业务逻辑都封装到了generateExcel方法中，并在组件的模板中使用了一个按钮来触发该方法。

3. 总结

通过以上步骤，我们利用Vue和Exceljs快速生成了一份包含个人信息和成绩的报表，使制作报表的过程更加高效、方便、准确。这种方法适用于各种场景，例如人员名单、销售报表等。