Cara mengemas kini dan menyegerakkan data secara dinamik melalui Vue dan Excel

Cara mengemas kini dan menyegerakkan data secara dinamik melalui Vue dan Excel

Kata Pengantar:
Dalam kerja dan kehidupan seharian, kita selalunya perlu memproses dan mengurus sejumlah besar data. Sebagai perisian hamparan yang berkuasa, Excel telah menjadi salah satu alatan kami yang paling biasa digunakan. Walau bagaimanapun, batasan Excel didedahkan secara beransur-ansur, seperti kemas kini data masa nyata yang tidak mencukupi dan kesukaran dalam penyuntingan kolaboratif. Untuk menyelesaikan masalah ini, kami boleh mencapai pengemaskinian dinamik dan penyegerakan data dengan menggabungkan Vue dan Excel. Artikel ini akan memperkenalkan cara menggunakan Vue dan Excel untuk melaksanakan fungsi ini dan memberikan contoh kod yang sepadan untuk rujukan anda.

Langkah 1: Penyediaan
Pertama, kita perlu menyediakan perisian dan persekitaran yang diperlukan. Kami perlu memasang alatan berikut:

1. Vue.js: rangka kerja JavaScript untuk membina antara muka pengguna, terutamanya digunakan untuk melaksanakan logik bahagian hadapan.
2. Element-UI: Rangka kerja UI desktop berdasarkan Vue.js, yang menyediakan satu siri komponen untuk memudahkan pembinaan dan reka bentuk halaman.
3. ExcelJS: Perpustakaan untuk membaca dan menulis fail Excel dalam penyemak imbas, menyokong operasi fail Excel dalam pelbagai format.

Langkah 2: Buat projek Vue dan fail Excel
Seterusnya, kita perlu mencipta projek Vue dan menambah fail Excel dalam direktori projek sebagai fail sumber untuk penyimpanan data. Projek Vue boleh dibuat dengan arahan berikut:

vue create excel-demo   // 创建Vue项目
cd excel-demo   // 进入项目目录

Kemudian, anda boleh menggunakan perisian Excel untuk mencipta fail Excel, simpan sebagai "data.xlsx", dan letakkannya dalam direktori "awam" projek.

Langkah 3: Pasang pakej kebergantungan yang diperlukan
Selepas memasuki direktori projek, kita perlu memasang dua pakej kebergantungan ExcelJS dan Element-UI. Ia boleh dipasang dengan arahan berikut:

npm install exceljs element-ui --save   // 安装ExcelJS和Element-UI

Langkah 4: Tulis kod
Seterusnya, kita mula menulis kod. Mula-mula, cipta folder bernama "komponen" dalam direktori "src" projek Vue dan buat fail bernama "Excel.vue" dalam folder.

Dalam fail Excel.vue, kita perlu melakukan kerja berikut:

1. Perkenalkan perpustakaan komponen Element-UI dan perpustakaan ExcelJS:

   <script>
   import { Button, Table, TableColumn } from 'element-ui';
   import ExcelJS from 'exceljs';
   ...
   </script>

2. Tentukan data yang diperlukan dalam pilihan data komponen:

   data() {
     return {
    workbook: null,  // Excel工作薄对象
    worksheet: null,  // Excel工作表对象
    tableData: [],  // 表格数据
     }
   },

3. Tulis kaedah dalam pilihan kaedah komponen untuk operasi membuka dan menyimpan fail Excel:

   methods: {
     openExcelFile() {
    const reader = new FileReader();
   
    // 读取Excel文件
    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
   
      this.workbook = new ExcelJS.Workbook();
      this.workbook.xlsx.load(data).then(this.loadExcelData);
    }
   
    // 弹出文件选择框
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.xlsx';
   
    input.onchange = () => {
      const file = input.files[0];
      reader.readAsArrayBuffer(file);
    }
   
    input.click();
     },
     saveExcelFile() {
    const buffer = await this.workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = 'data.xlsx';
    downloadLink.click();
     },
     loadExcelData() {
    this.worksheet = this.workbook.getWorksheet(1);
    const columns = this.worksheet.getRow(1).values;
    const rows = this.worksheet.getRows(2, this.worksheet.rowCount);
   
    this.tableData = rows.map(row => {
      const rowData = row.values;
      return rowData.reduce((obj, value, index) => {
        obj[columns[index]] = value;
        return obj;
      }, {});
    });
     },
     ...
   }

4. Tulis kod untuk susun atur halaman dan komponen jadual dalam pilihan templat komponen:

   <template>
     <div>
    <el-button type="primary" @click="openExcelFile">打开Excel文件</el-button>
    <el-button type="success" @click="saveExcelFile">保存Excel文件</el-button>
    <el-table :data="tableData">
      <el-table-column v-for="(value, key) in tableData[0]" :key="key" :label="key" :prop="key"></el-table-column>
    </el-table>
     </div>
   </template>

5. Akhirnya , anda perlu mengeksport komponen dalam teg skrip komponen:

   export default {
     components: {
    Button,
    Table,
    TableColumn,
     },
     ...
   }
   </script>

Langkah 5: Jalankan projek
Selepas melengkapkan langkah di atas, kami boleh menjalankan projek. Jalankan arahan berikut dalam direktori projek:

npm run serve

Kemudian, lawati http://localhost:8080 dalam penyemak imbas, dan anda akan melihat halaman dengan fungsi untuk membuka dan menyimpan fail Excel. Klik butang "Buka Fail Excel", pilih fail Excel yang disediakan sebelum ini, dan data dalam fail Excel akan dipaparkan pada halaman. Kami boleh mengubah suai dan mengedit data, dan kemudian klik butang "Simpan Fail Excel", dan data akan disegerakkan secara automatik ke fail Excel.

Ringkasan:
Artikel ini memperkenalkan cara mengemas kini dan menyegerakkan data secara dinamik melalui Vue dan Excel. Dengan menggunakan Vue dan pustaka ExcelJS, kami boleh membaca dan menulis fail Excel dengan mudah dan memaparkan data dalam fail Excel dalam halaman Vue kami dalam masa nyata. Dengan cara ini, kami bukan sahaja boleh memproses dan mengurus sejumlah besar data dengan lebih cepat, tetapi juga dengan mudah bekerjasama dengan orang lain untuk mengedit data, meningkatkan kecekapan kerja dan ketepatan data. Semoga artikel ini bermanfaat kepada semua orang!

Atas ialah kandungan terperinci Cara mengemas kini dan menyegerakkan data secara dinamik melalui Vue dan Excel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!