vue+element表格导出为Excel文件

接下来我将详细讲解如何使用Vue和Element UI来实现表格导出为Excel文件，具体步骤如下：

1. 安装必要的依赖

第一步是安装必要的依赖，包括 xlsx 库和 file-saver 库。可以使用npm或者yarn来安装依赖，命令如下：

npm install xlsx file-saver --save

yarn add xlsx file-saver

2. 引入Element UI

可以使用Element UI中的表格组件来展示数据和操作，可以通过以下方式引入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 准备数据

准备需要导出的数据，可以在组件的 data 方法中定义一个数组，例如：

data() {
  return {
    tableData: [
      {date: '2022-01-01', name: 'Tom', score: 80},
      {date: '2022-01-01', name: 'Jack', score: 90},
      {date: '2022-01-02', name: 'Lucy', score: 70},
      {date: '2022-01-02', name: 'Bob', score: 60}
    ]
  }
}

4. 渲染表格

使用<el-table>和<el-table-column>标签来渲染表格组件，例如：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="score" label="分数"></el-table-column>
    </el-table>
    <el-button type="primary" @click="handleExport">导出Excel</el-button>
  </div>
</template>

5. 导出Excel文件

为了导出Excel文件，我们需要先创建一个Excel文件的工作簿，然后往里面写入数据。可以通过以下方式实现：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';

methods: {
  handleExport() {
    // 创建工作簿对象
    const wb = XLSX.utils.book_new();

    // 创建表格对象
    const ws = XLSX.utils.json_to_sheet(this.tableData);

    // 将表格对象添加到工作簿中
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    // 将工作簿转成二进制流并保存
    const wbout = XLSX.write(wb, {type: 'array', bookType: 'xlsx' });
    const fileName = 'export.xlsx';
    const file = new Blob([wbout], {type: 'application/octet-stream' });
    FileSaver.saveAs(file, fileName);
  }
}

在以上代码中，我们先创建一个工作簿对象 wb，然后将需要导出的数据 this.tableData 转成表格对象 ws，再将表格对象添加到工作簿中。这里使用了 XLSX.write 方法将工作簿转成二进制流，最后使用 file-saver 库将数据流保存到本地。

示例1

下面是一个完整的组件示例，用于展示如何使用Vue和Element UI将数据导出为Excel文件：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="score" label="分数"></el-table-column>
    </el-table>
    <el-button type="primary" @click="handleExport">导出Excel</el-button>
  </div>
</template>

<script>
import XLSX from 'xlsx';
import FileSaver from 'file-saver';

export default {
  data() {
    return {
      tableData: [
        {date: '2022-01-01', name: 'Tom', score: 80},
        {date: '2022-01-01', name: 'Jack', score: 90},
        {date: '2022-01-02', name: 'Lucy', score: 70},
        {date: '2022-01-02', name: 'Bob', score: 60}
      ]
    }
  },

  methods: {
    handleExport() {
      // 创建工作簿对象
      const wb = XLSX.utils.book_new();

      // 创建表格对象
      const ws = XLSX.utils.json_to_sheet(this.tableData);

      // 将表格对象添加到工作簿中
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      // 将工作簿转成二进制流并保存
      const wbout = XLSX.write(wb, {type: 'array', bookType: 'xlsx' });
      const fileName = 'export.xlsx';
      const file = new Blob([wbout], {type: 'application/octet-stream' });
      FileSaver.saveAs(file, fileName);
    }
  }
}
</script>

<style>
/* 样式省略 */
</style>

示例2

下面是一个通过接口从后端获取数据的例子：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="score" label="分数"></el-table-column>
    </el-table>
    <el-button type="primary" @click="handleExport">导出Excel</el-button>
  </div>
</template>

<script>
import XLSX from 'xlsx';
import FileSaver from 'file-saver';

export default {
  data() {
    return {
      tableData: []
    }
  },

  methods: {
    fetchData() {
      // 通过接口获取后端数据
      // ...省略...
      this.tableData = response.data;
    },

    handleExport() {
      this.fetchData().then(() => {
        // 创建工作簿对象
        const wb = XLSX.utils.book_new();

        // 创建表格对象
        const ws = XLSX.utils.json_to_sheet(this.tableData);

        // 将表格对象添加到工作簿中
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

        // 将工作簿转成二进制流并保存
        const wbout = XLSX.write(wb, {type: 'array', bookType: 'xlsx' });
        const fileName = 'export.xlsx';
        const file = new Blob([wbout], {type: 'application/octet-stream' });
        FileSaver.saveAs(file, fileName);
      });
    }
  }
}
</script>

<style>
/* 样式省略 */
</style>

这个例子中，tableData 数组需要通过接口获取数据。在导出Excel文件之前，需要先调用 fetchData() 方法获取数据，然后再执行导出操作。