Vue と Excel を使用してデータを自動的に並べ替えてエクスポートする方法

data: {
  products: [
    { name: '手机', price: 2000, sales: 100 },
    { name: '电视', price: 3000, sales: 200 },
    { name: '冰箱', price: 4000, sales: 150 }
  ],
  orderBy: 'price' // 默认按照价格排序
},

methods: {
  sortData() {
    this.products.sort((a, b) => a[this.orderBy] - b[this.orderBy]);
  }
},

computed: {
  sortedProducts() {
    return this.sortData();
  }
},

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th @click="orderBy = 'name'">名称</th>
          <th @click="orderBy = 'price'">价格</th>
          <th @click="orderBy = 'sales'">销量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in sortedProducts" :key="product.name">
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
          <td>{{ product.sales }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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

methods: {
  exportExcel() {
    const worksheet = XLSX.utils.json_to_sheet(this.products);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    const data = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    saveAs(data, 'products.xlsx');
  }
},

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