Cara menggunakan Vue dan Excel untuk mengedit kumpulan dan mengeksport data

Cara menggunakan Vue dan Excel untuk melaksanakan penyuntingan kelompok dan eksport data

Dalam kerja harian, kita selalunya perlu mengedit kumpulan dan mengeksport sejumlah besar data. Fungsi ini boleh direalisasikan dengan sangat mudah dengan menggabungkan Vue dengan Excel. Artikel ini akan memberikan pengenalan terperinci tentang cara menggunakan Vue dan Excel untuk melaksanakan penyuntingan kelompok dan eksport data, serta melampirkan contoh kod yang sepadan.

1. Penyediaan projek

Pertama, kita perlu mencipta projek Vue dan memperkenalkan perpustakaan pergantungan yang berkaitan. Dalam projek vue-cli, anda boleh memasang perpustakaan bergantung yang diperlukan dengan memasukkan arahan berikut dalam terminal:

npm install vue-xlsx --save
npm install xlsx-style --save

2. Pengeditan kumpulan data

Dalam komponen Vue, kami boleh menggunakan jadual untuk memaparkan data dan melaksanakan kumpulan yang sepadan operasi penyuntingan. Berikut ialah contoh kod mudah:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>

    <button @click="exportData">导出数据</button>
    <button @click="importData">导入数据</button>
  </div>
</template>

<script>
import { utils } from "xlsx";
import { read, write } from "vue-xlsx";

export default {
  data() {
    return {
      dataList: [
        { name: "张三", age: 20, gender: "男" },
        { name: "李四", age: 25, gender: "女" },
        { name: "王五", age: 30, gender: "男" },
      ]
    }
  },

  methods: {
    exportData() {
      const worksheet = utils.json_to_sheet(this.dataList);
      const workbook = utils.book_new();
      utils.book_append_sheet(workbook, worksheet, "Sheet1");
      const excelData = write(workbook, { type: "binary" });
      this.downloadExcel(excelData, "data.xlsx");
    },

    importData() {
      const input = document.createElement("input");
      input.type = "file";
      input.accept = ".xlsx";
      input.addEventListener("change", (e) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          const data = new Uint8Array(e.target.result);
          const workbook = utils.read(data, { type: "array" });
          const worksheet = workbook.Sheets[workbook.SheetNames[0]];
          this.dataList = utils.sheet_to_json(worksheet, { header: 1 });
        }
        fileReader.readAsArrayBuffer(e.target.files[0]);
      });
      input.click();
    },

    downloadExcel(data, filename) {
      const blob = new Blob([data], { type: "application/octet-stream" });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = filename;
      link.click();
      URL.revokeObjectURL(link.href);
    }
  }
}
</script>

Dalam kod di atas, data dibaca dan ditulis dengan menggunakan kaedah read dan write pustaka vue-xlsx data ke dan mengimport data daripada fail Excel. Antaranya, kaedah exportData digunakan untuk mengeksport data Mula-mula, gunakan utils.json_to_sheet untuk menukar data menjadi lembaran kerja, dan kemudian gunakan utils.book_append_sheet<.> untuk menukar data ke dalam lembaran kerja Tambahkannya pada buku kerja, dan akhirnya tukar buku kerja kepada data binari melalui <code>write dan panggil kaedah downloadExcel untuk memuat turun. Kaedah importData digunakan untuk mengimport data Mula-mula, buat elemen input, tetapkan jenisnya dan jenis fail yang diterima, dan kemudian tukar fail Excel kepada tatasusunan melalui FileReader dengan mendengar peristiwa perubahan. elemen input dan gunakan utils.readmenukar tatasusunan menjadi buku kerja, dan kemudian menukar helaian pertama buku kerja kepada data JSON melalui utils.sheet_to_json dan mengemas kininya ke dalam Senarai data komponen. read和write方法进行数据的读取和写入，实现了将数据导出为Excel文件和从Excel文件导入数据。其中，exportData方法用于导出数据，首先使用utils.json_to_sheet将数据转换为工作表，然后通过utils.book_append_sheet将工作表添加到工作簿中，最后通过write将工作簿转换为二进制数据，并调用downloadExcel方法进行下载。importData方法用于导入数据，首先创建一个input元素，设置其类型和接受的文件类型，然后通过监听input元素的change事件，通过FileReader将Excel文件转换为数组，并使用utils.read将数组转换为工作簿，然后通过utils.sheet_to_json将工作簿的第一个工作表转换为JSON数据，并更新到组件的dataList中。

三、数据的导出

除了批量编辑数据，我们还可以将数据导出为Excel文件。上述代码中已经实现了将数据导出为Excel文件的功能。通过点击"导出数据"按钮，会调用exportData

3. Eksport data

Selain penyuntingan kumpulan data, kami juga boleh mengeksport data ke fail Excel. Fungsi mengeksport data ke fail Excel telah dilaksanakan dalam kod di atas. Dengan mengklik butang "Eksport Data", kaedah exportData akan dipanggil untuk mengeksport data DataList ke fail Excel dan memuat turunnya secara setempat secara automatik.

4. Ringkasan🎜🎜Melalui gabungan Vue dan Excel, kami boleh melaksanakan penyuntingan kelompok dan eksport data dengan mudah. Dengan membaca fail Excel dan menukarnya kepada data, kami boleh mengimport sejumlah besar data dengan cepat dan melakukan pengeditan kelompok melalui jadual. Pada masa yang sama, kami juga boleh mengeksport data yang diedit ke fail Excel untuk memudahkan operasi dan analisis seterusnya. Di atas ialah pengenalan terperinci untuk menggunakan Vue dan Excel untuk melaksanakan penyuntingan kelompok dan eksport data saya harap ia dapat membantu semua orang. 🎜

Atas ialah kandungan terperinci Cara menggunakan Vue dan Excel untuk mengedit kumpulan dan mengeksport data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!