Comment importer des fichiers Excel avec des champs personnalisés dans Vue

Avec le développement continu de la technologie Internet, de plus en plus d'entreprises doivent gérer et analyser des quantités massives de données, et une grande partie de ces données existent sous forme d'Excel. Les applications Web basées sur Vue doivent généralement importer des fichiers Excel pour l'analyse et l'application des données. Vue dispose de nombreuses bibliothèques capables d'importer des fichiers Excel, mais généralement, le format de données des fichiers Excel ne correspond pas nécessairement au format dont nous avons besoin, nous devons donc personnaliser les champs pour les données Excel importées afin de nous adapter à nos besoins d'intégration et d'analyse de données. Cet article vous présentera comment importer des champs personnalisés dans des fichiers Excel dans Vue.

1. Importation de fichiers Excel

Dans les applications Vue, nous utilisons généralement certaines bibliothèques tierces pour importer des fichiers Excel. Ces outils incluent : ExcelJS, Xlsx, etc. Cet article utilise ExcelJS comme exemple pour présenter comment utiliser Vue pour importer des fichiers Excel. Tout d'abord, vous devez installer le package de dépendances ExcelJS :

npm install exceljs --save

Puis importer ExcelJS dans le composant Vue :

import ExcelJS from 'exceljs';

Après cela, nous devons utiliser ExcelJS pour charger le fichier Excel. Ici, nous utilisons l'objet FileReader de JavaScript pour y parvenir.

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);
    },
  },
};

Dans cet exemple, nous avons défini la méthode handleImportExcel pour gérer la lecture des fichiers Excel, créé un nouvel objet FileReader via new FileReader() et lu le fichier Excel en tant que type ArrayBuffer (contenu), ce qui peut éviter un problème de format d'encodage de fichier. .

ExcelJS prend en charge plusieurs formats de fichiers, notamment xlsx, xls, csv, ods, etc. Ici, nous utilisons la méthode load() pour lire le contenu du fichier Excel et renvoyer un objet Workbook, qui correspond aux données initiales des colonnes personnalisées que nous importons dans Excel.

2. Colonnes importées personnalisées

Après avoir importé avec succès le fichier Excel, avant de continuer à intégrer les données, les données doivent être filtrées et traitées par des colonnes personnalisées. Ce processus peut être implémenté à l'aide des propriétés calculées ou des filtres de Vue pour répondre à nos besoins en données.

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);
    },
  },
};

Dans cet exemple, nous utilisons la méthode ExcelJS pour lire l'objet feuille de calcul dans le fichier Excel. Ensuite, nous avons créé un tableau d'en-têtes, parcouru l'en-tête du fichier Excel via la méthode eachRow() dans l'objet feuille de calcul et stocké la valeur de chaque cellule de l'en-tête dans le tableau d'en-têtes. Ensuite, grâce aux méthodes eachRow() et eachCell(), il parcourt les lignes et les colonnes d'Excel, fait correspondre les données de chaque cellule de la ligne au tableau d'en-têtes et stocke les résultats dans l'objet rowData. Enfin, le rowData est stocké dans le tableau de données, et enfin les données sont transmises au composant parent via la méthode $emit() de Vue.

3. Rendu des colonnes personnalisées

Après avoir importé avec succès le fichier Excel, nous pouvons librement filtrer et traiter les données avec des colonnes personnalisées. Dans Vue, vous pouvez utiliser des propriétés calculées ou des filtres pour implémenter un traitement personnalisé des données.

<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>

Dans cet exemple, nous obtenons les informations d'en-tête des données transmises via les en-têtes d'attributs calculés. Dans filteredData, nous filtrons et traitons les colonnes personnalisées pour chaque ligne de données et effectuons un traitement secondaire sur les champs d'origine tels que l'ID, le nom, l'âge et le sexe.

4. Résumé

Cet article explique comment importer des fichiers Excel dans les applications VueWeb et comment traiter les données importées avec des colonnes personnalisées. Nous utilisons la bibliothèque d'outils ExcelJS pour lire le contenu des fichiers Excel et utilisons des propriétés ou des filtres calculés dans les composants Vue pour implémenter un traitement de colonnes personnalisé pour Excel importé. Ces technologies nous permettront de traiter et d’utiliser les données des fichiers Excel de manière plus efficace et plus flexible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!