vue表格数据下载成excel

您可以使用以下步骤将 Vue 表格数据下载为 Excel：

1. 安装 `xlsx` 和 `file-saver` 库

npm install xlsx file-saver --save

2. 创建一个函数来将表格数据转换为 Excel 文件

import XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export function exportToExcel(tableData, fileName) {
  const worksheet = XLSX.utils.json_to_sheet(tableData);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  saveAs(new Blob([excelBuffer], { type: 'application/octet-stream' }), `${fileName}.xlsx`);
}

3. 在组件中调用该函数并传递表格数据和文件名

<template>
  <div>
    <button @click="exportTableData">Export to Excel</button>
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in tableData" :key="index">
          <td>{{ row.column1 }}</td>
          <td>{{ row.column2 }}</td>
          <td>{{ row.column3 }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { exportToExcel } from '@/utils/exportToExcel';

export default {
  data() {
    return {
      tableData: [
        { column1: 'Value 1', column2: 'Value 2', column3: 'Value 3' },
        { column1: 'Value 4', column2: 'Value 5', column3: 'Value 6' },
        { column1: 'Value 7', column2: 'Value 8', column3: 'Value 9' },
      ],
    };
  },
  methods: {
    exportTableData() {
      exportToExcel(this.tableData, 'table-data');
    },
  },
};
</script>

这样，当用户点击“Export to Excel”按钮时，表格数据将被导出为名为“table-data.xlsx”的 Excel 文件。