vue中导出Excel表格的实现代码

下面是详细讲解如何在Vue中实现导出Excel表格的步骤。

1. 安装相关插件

要在Vue中导出Excel表格，需要安装以下插件：

• xlsx: 用于构建Excel文件。
• file-saver: 用于提供文件下载功能。

在项目的根目录下使用npm进行安装：

npm install xlsx file-saver --save

2. 编写导出方法

在Vue的组件中编写导出方法，首先要引入xlsx和file-saver：

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

然后，在需要导出Excel表格的方法中，调用XLSX.utils.json_to_sheet方法将数据转换成表格矩阵，并将该矩阵传递给XLSX.utils.book_append_sheet方法，最后调用XLSX.write方法将数据导出成Excel：

exportExcel() {
  const data = this.tableData;
  const sheetName = 'Sheet1';
  const sheetData = XLSX.utils.json_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, sheetData, sheetName);
  const wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    type: 'array'
  });
  FileSaver.saveAs(
    new Blob([wbout], { type: 'application/octet-stream' }),
    'example.xlsx'
  );
}

上面的代码中，我们先获取需要导出的数据this.tableData，然后指定Excel文件中的表格名称Sheet1，将数据转换成表格矩阵，并将表格矩阵添加到工作簿中。最后调用XLSX.write方法，将工作簿导出成二进制数据数组wbout，并使用FileSaver.saveAs方法提供下载文件的功能。

3. 调用导出方法

在Vue组件中调用导出方法即可实现Excel表格的导出：

<template>
  <div>
    <el-button type="primary" @click="exportExcel">导出Excel</el-button>
  </div>
</template>

示例说明

示例1：导出静态数据

假设现在需要导出以下静态数据：

[
  { id: 1, name: '张三', age: 20, address: '北京市海淀区' },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
  { id: 3, name: '王五', age: 40, address: '深圳市南山区' }
]

则可以在Vue组件中定义该数据，然后在导出方法中引用即可：

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20, address: '北京市海淀区' },
        { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 40, address: '深圳市南山区' }
      ]
    };
  },
  methods: {
    exportExcel() {
      const data = this.tableData;
      // 将上面的步骤2的代码复制到这里
    }
  }
};

示例2：导出动态数据

如果需要导出动态数据，例如从服务器获取的数据，则需要在获取数据后使用json_to_sheet将其转换成表格矩阵。假设从服务器获取以下动态数据：

[
  { id: 1, name: '张三', age: 20, address: '北京市海淀区' },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
  { id: 3, name: '王五', age: 40, address: '深圳市南山区' }
]

则可以在Vue组件中定义该数据获取方法，并在数据获取成功后将数据保存到this.tableData中：

export default {
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    getData() {
      // 发送请求获取数据
      axios.get('/api/data').then(response => {
        this.tableData = response.data;
      });
    },
    exportExcel() {
      // 将上面的步骤2的代码复制到这里
    }
  },
  mounted() {
    this.getData();
  }
};

在调用导出方法时，要确保已经获取到了数据：

<template>
  <div>
    <el-button type="primary" @click="exportExcel" :disabled="!tableData.length">导出Excel</el-button>
  </div>
</template>

上面的代码中，我们将导出按钮的disabled属性绑定到表格数据的长度上，确保只有在获取到数据后才能导出Excel表格。

至此，一个简单的在Vue中实现导出Excel表格的代码攻略就完成了。