Cara mengimport fail Excel dengan medan tersuai dalam Vue

Dengan perkembangan berterusan teknologi Internet, semakin banyak syarikat perlu mengurus dan menganalisis sejumlah besar data, dan kebanyakan data ini wujud dalam bentuk Excel. Aplikasi web berdasarkan Vue biasanya perlu mengimport fail Excel untuk analisis data dan aplikasi data. Vue mempunyai banyak perpustakaan yang boleh mengimport fail Excel, tetapi biasanya, format data fail Excel tidak semestinya memenuhi format yang kami perlukan, jadi kami perlu menyesuaikan medan untuk data Excel yang diimport untuk disesuaikan dengan keperluan penyepaduan dan analisis data kami. Artikel ini akan memperkenalkan anda cara mengimport medan tersuai ke dalam fail Excel dalam Vue.

1. Import fail Excel

Dalam aplikasi Vue, kami biasanya menggunakan beberapa perpustakaan pihak ketiga untuk mengimport fail Excel. Alat ini termasuk: ExcelJS, Xlsx, dll. Artikel ini menggunakan ExcelJS sebagai contoh untuk memperkenalkan cara menggunakan Vue untuk mengimport fail Excel. Mula-mula anda perlu memasang pakej pergantungan ExcelJS:

npm install exceljs --save

Kemudian import ExcelJS dalam komponen Vue:

import ExcelJS from 'exceljs';

Selepas itu, kita perlu menggunakan ExcelJS untuk memuatkan fail Excel, di sini kita menggunakan objek JavaScript FileReader untuk dicapai.

export default {
  name: 'ImportExcel',
  data() {
    return {};
  },
  methods: {
    handleImportExcel(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const result = e.target.result;
        const workbook = new ExcelJS.Workbook();
        workbook.xlsx.load(result).then((book) => {
          // 处理Workbook对象
        });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};

Dalam contoh ini, kami mentakrifkan kaedah handleImportExcel untuk mengendalikan pembacaan fail excel, mencipta objek FileReader baharu melalui FileReader() baharu dan membaca fail Excel sebagai jenis ArrayBuffer (kandungan ), ini boleh mengelakkan masalah format pengekodan fail.

ExcelJS menyokong berbilang format fail, termasuk xlsx, xls, csv, ods, dsb. Di sini kami menggunakan kaedah load() untuk membaca kandungan fail Excel dan mengembalikan objek Buku Kerja, yang merupakan data awal untuk lajur tersuai yang kami import ke dalam Excel.

2. Lajur import tersuai

Selepas kami berjaya mengimport fail Excel, sebelum meneruskan penyepaduan data, data perlu ditapis dan diproses oleh lajur tersuai. Proses ini boleh dilaksanakan menggunakan sifat atau penapis yang dikira Vue untuk memenuhi keperluan data kami.

export default {
  name: 'ImportExcel',
  data() {
    return {};
  },
  methods: {
    handleImportExcel(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const result = e.target.result;
        const workbook = new ExcelJS.Workbook();
        workbook.xlsx.load(result).then((book) => {
          const worksheet = book.worksheets[0];
          const headers = [];
          worksheet.eachRow((row) => {
            if (row.number === 1) {
              row.eachCell((cell) => {
                headers.push(cell.value);
              });
            }
          });
          const data = [];
          worksheet.eachRow((row, rowNumber) => {
            if (rowNumber > 1) {
              const rowData = {};
              row.eachCell((cell, colNumber) => {
                const colName = headers[colNumber - 1];
                rowData[colName] = cell.value;
              });
              data.push(rowData);
            }
          });
          this.$emit('add-data', data);
        });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};

Dalam contoh ini, kami menggunakan kaedah ExcelJS untuk membaca objek lembaran kerja dalam fail Excel. Kemudian, kami mencipta tatasusunan pengepala, melintasi pengepala fail Excel melalui kaedah eachRow() dalam objek lembaran kerja dan menyimpan nilai setiap sel dalam pengepala ke dalam tatasusunan pengepala. Kemudian, melalui kaedah eachRow() dan eachCell(), ia merentasi baris dan lajur Excel, memadankan data setiap sel dalam baris dengan tatasusunan pengepala dan menyimpan hasil dalam objek rowData. Akhir sekali, rowData disimpan dalam tatasusunan data, dan akhirnya data dihantar kepada komponen induk melalui kaedah $emit() Vue.

3. Pemberian lajur tersuai

Selepas berjaya mengimport fail Excel, kami boleh menapis dan memproses data secara bebas dengan lajur tersuai. Dalam Vue, anda boleh menggunakan sifat atau penapis yang dikira untuk melaksanakan pemprosesan data tersuai.

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in filteredData" :key="index">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
        <td>{{ row.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "CustomFields",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    headers() {
      const firstRow = this.data[0];
      return Object.keys(firstRow);
    },
    filteredData() {
      return this.data.map((item) => {
        return {
          id: item.ID,
          name: item.Name,
          age: item.Age,
          gender: item.Gender === "M" ? "男" : "女",
        };
      });
    },
  },
};
</script>

Dalam contoh ini, kami memperoleh maklumat pengepala data yang dihantar melalui pengepala atribut yang dikira. Dalam filteredData, kami menapis dan memproses lajur tersuai untuk setiap baris data dan melakukan pemprosesan sekunder pada medan asal seperti ID, Nama, Umur dan Jantina.

4. Ringkasan

Artikel ini memperkenalkan cara mengimport fail Excel dalam aplikasi VueWeb dan cara memproses data yang diimport dengan lajur tersuai. Kami menggunakan pustaka alat ExcelJS untuk membaca kandungan fail Excel dan menggunakan sifat atau penapis yang dikira dalam komponen Vue untuk melaksanakan pemprosesan lajur tersuai untuk Excel yang diimport. Teknologi ini akan membolehkan kami memproses dan menggunakan data fail Excel dengan lebih cekap dan fleksibel.

Atas ialah kandungan terperinci Cara mengimport fail Excel dengan medan tersuai dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!