vue导出excel表格的新手详细教程

下面是“vue导出excel表格的新手详细教程”的完整攻略：

1. 安装依赖

首先，我们需要安装两个依赖包，file-saver和xlsx，分别用于文件保存和Excel表格的生成：

npm install file-saver xlsx --save

2. 生成Excel文件

在Vue组件中，我们创建一个可以导出表格数据的方法，该方法需要调用xlsx库中的utils对象中的json_to_sheet方法，将数据转换为Excel表格中的工作表对象。如下所示：

exportExcel() {
  // 数据源
  const data = [
    { id: 1, name: '小明', age: 18 },
    { id: 2, name: '小红', age: 20 },
    { id: 3, name: '小刚', age: 22 }
  ];

  // 转换成工作表对象
  const sheet = xlsx.utils.json_to_sheet(data);

  // 生成Excel文件
  const workbook = xlsx.utils.book_new();
  xlsx.utils.book_append_sheet(workbook, sheet, 'Sheet1');
  const excelBuffer = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
  const fileName = '测试表格.xlsx';
  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
  saveAs(blob, fileName);
}

在上面的代码中，我们创建了一个名为data的数据源，该数据源是一个包含三个对象的数组，每个对象包含id、name和age三个属性。然后，我们调用xlsx.utils.json_to_sheet方法将该数据源转换为工作表对象。

接着，我们创建了一个名为workbook的工作簿对象，并通过xlsx.utils.book_append_sheet方法将工作表对象添加到工作簿中。最后，我们调用xlsx.write方法将工作簿对象写入缓冲区。

3. 下载Excel文件

在文件生成后，我们需要使用file-saver库中的saveAs方法将缓冲区中的数据流保存为Excel文件。如下所示：

<template>
  <div>
    <button @click="exportExcel">导出Excel文件</button>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';
import xlsx from 'xlsx';

export default {
  methods: {
    exportExcel() {
      // 同上
    }
  }
}
</script>

在上面的代码中，我们在模板中创建了一个按钮，并绑定一个点击事件，该事件调用了名为exportExcel的方法，该方法中使用file-saver库中的saveAs方法将Excel文件下载到本地。

示例1

为了更好地展示该教程的功能和性能，我们下面来看一个具体的示例，该示例实现了一个每秒钟随机生成数据源并导出Excel文件的功能。如下所示：

<template>
  <div>
    <button @click="startExport">开始导出Excel文件</button>
    <button @click="stopExport">停止导出Excel文件</button>
    <p>已经导出数据：{{ count }}</p>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';
import xlsx from 'xlsx';

export default {
  data() {
    return {
      count: 0,
      intervalId: null
    };
  },
  methods: {
    startExport() {
      this.count = 0;
      this.intervalId = setInterval(() => {
        this.exportExcel();
      }, 1000);
    },
    stopExport() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },
    exportExcel() {
      const data = [];
      for (let i = 0; i < 100; i++) {
        const obj = {};
        obj.id = i + 1;
        obj.name = this.randomName();
        obj.age = Math.floor(Math.random() * 60 + 10);
        data.push(obj);
      }

      const sheet = xlsx.utils.json_to_sheet(data);

      const workbook = xlsx.utils.book_new();
      xlsx.utils.book_append_sheet(workbook, sheet, 'Sheet1');
      const excelBuffer = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
      const fileName = '测试表格.xlsx';
      const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
      saveAs(blob, fileName);

      this.count += data.length;
    },
    randomName() {
      const firstNames = ['张', '李', '周', '吴', '郑', '王', '陈', '贝', '欧阳', '赵'];
      const lastNames = ['红', '蓝', '绿', '黄', '紫', '黑', '白', '橙', '灰', '粉'];
      return firstNames[Math.floor(Math.random() * firstNames.length)] +
             lastNames[Math.floor(Math.random() * lastNames.length)];
    }
  }
}
</script>

在上面的示例中，我们在模板中定义了两个按钮，分别用于开始和停止导出Excel文件。然后，我们在每秒钟调用一次名为exportExcel的方法，该方法随机生成一组数据源并将其导出为Excel文件。

示例2

为了更好地了解该教程中的代码实现，下面我们来看一个示例，展示如何将前端表格中的数据导出为Excel文件。如下所示：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportExcel">导出Excel文件</button>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';
import xlsx from 'xlsx';

export default {
  data() {
    return {
      list: [
        { id: 1, name: '商品1', price: 50 },
        { id: 2, name: '商品2', price: 100 },
        { id: 3, name: '商品3', price: 150 }
      ]
    };
  },
  methods: {
    exportExcel() {
      const data = this.list.map(item => {
        return {
          '编号': item.id,
          '名称': item.name,
          '价格': item.price
        };
      });

      const sheet = xlsx.utils.json_to_sheet(data);

      const workbook = xlsx.utils.book_new();
      xlsx.utils.book_append_sheet(workbook, sheet, 'Sheet1');
      const excelBuffer = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
      const fileName = '商品列表.xlsx';
      const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
      saveAs(blob, fileName);
    }
  }
}
</script>

在上面的示例中，我们创建了一个<table>标签，并将数据源list中的数据展示在表格中。然后，我们创建了一个名为exportExcel的方法，该方法通过map方法将数据源转换为对象数组，并使用xlsx.utils.json_to_sheet方法将其转换为工作表对象。最后，我们通过saveAs方法下载生成的Excel文件。

以上是vue导出Excel表格的完整攻略，希望对你有所帮助。