La coopération tacite entre Vue et Excel : comment réaliser la modification par lots et l'exportation de données-Voir.js-php.cn

La coopération tacite entre Vue et Excel : comment réaliser la modification par lots et l'exportation de données

WBOY

Libérer： 2023-07-21 13:40:58

original

1487 Les gens l'ont consulté

Coopération tacite entre Vue et Excel : Comment réaliser la modification par lots et l'exportation de données

Excel a toujours été un outil couramment utilisé en termes de gestion et de traitement de données. Avec le développement de la technologie frontale, Vue, en tant que framework JavaScript populaire, présente également d'excellentes performances en matière d'affichage et de traitement des données. Cet article expliquera comment réaliser la modification par lots et l'exportation de données grâce à la combinaison de Vue et Excel.

La pile technologique impliquée est la suivante :

Vue.js : un framework JavaScript front-end pour créer des interfaces utilisateur.
vue-xlsx : Un composant Vue pratique pour traiter les fichiers Excel.
xlsx : Une bibliothèque JavaScript pour analyser et générer des fichiers Excel.

Étape 1 : Installer les dépendances associées

Tout d'abord, ouvrez une fenêtre de terminal de ligne de commande dans le répertoire racine du projet et exécutez la commande suivante :

npm install vue-xlsx xlsx

Copier après la connexion

Une fois l'installation terminée, introduisez ces modules dans le fichier d'entrée Vue :

import Vue from 'vue';
import VueXlsx from 'vue-xlsx';

Vue.use(VueXlsx);

Copier après la connexion

Étape 2 : Créer un composant d'affichage de données

Ensuite, nous créons un composant Vue pour afficher les données et effectuer des modifications par lots. Supposons que nous disposions d'un tableau d'informations sur les étudiants contenant le nom, l'âge et les notes de l'étudiant. Nous pouvons créer un composant appelé StudentList : StudentList的组件：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in students" :key="index">
          <td>{{ student.name }}</td>
          <td>{{ student.age }}</td>
          <td>{{ student.score }}</td>
        </tr>
      </tbody>
    </table>

    <button @click="exportData">导出数据</button>
    <input type="file" @change="importData" accept=".xlsx" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { name: '张三', age: 18, score: 90 },
        { name: '李四', age: 19, score: 85 },
        { name: '王五', age: 20, score: 95 },
      ],
    };
  },
  methods: {
    exportData() {
      const data = [['姓名', '年龄', '成绩']];
      this.students.forEach(student => {
        data.push([student.name, student.age, student.score]);
      });
      this.$xlsx.export(data, '学生信息.xlsx');
    },
    importData(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = this.$xlsx.parse(e.target.result);
        // 处理解析后的数据
      };
      reader.readAsBinaryString(file);
    },
  },
};
</script>

Copier après la connexion

在上述代码中，我们使用了v-for指令来循环渲染学生列表。点击“导出数据”按钮时，我们将学生数据转换为Excel文件并进行导出。而选择Excel文件后，我们通过FileReader来解析该文件，并将解析后的数据传递给相应的处理函数。

步骤三：打开Excel文件

为了方便操作Excel文件，我们需要扩展Vue的原型链，创建一个全局方法$xlsx。在Vue的入口文件中，我们可以添加以下代码：

import xlsx from 'xlsx';

Vue.prototype.$xlsx = {
  export(data, filename) {
    const ws = xlsx.utils.aoa_to_sheet(data);
    const wb = xlsx.utils.book_new();
    xlsx.utils.book_append_sheet(wb, ws, 'Sheet1');
    xlsx.writeFile(wb, filename);
  },
  parse(data) {
    const wb = xlsx.read(data, { type: 'binary' });
    const ws = wb.Sheets[wb.SheetNames[0]];
    return xlsx.utils.sheet_to_json(ws, { header: 1 });
  },
};

Copier après la connexion

在上述代码中，我们使用了xlsx库的相关方法来处理Excel文件。$xlsx.export方法将数据导出为Excel文件，$xlsx.parse

npm install
npm run serve

Copier après la connexion

Dans le code ci-dessus, nous utilisons la directive v-for pour afficher la liste des étudiants en boucle. En cliquant sur le bouton « Exporter les données », nous convertissons les données des étudiants en un fichier Excel et les exportons. Après avoir sélectionné le fichier Excel, nous utilisons FileReader pour analyser le fichier et transmettre les données analysées à la fonction de traitement correspondante.

Étape 3 : Ouvrir le fichier Excel

Afin de faciliter le fonctionnement des fichiers Excel, nous devons étendre la chaîne de prototypes de Vue et créer une méthode globale $xlsx. Dans le fichier d'entrée Vue, nous pouvons ajouter le code suivant :

rrreee

Dans le code ci-dessus, nous utilisons les méthodes pertinentes de la bibliothèque xlsx pour traiter les fichiers Excel. La méthode $xlsx.export exporte les données vers des fichiers Excel et la méthode $xlsx.parse est utilisée pour analyser les fichiers Excel.

Étape 4 : Installer les dépendances et exécuter le projet

Enfin, dans la fenêtre du terminal de ligne de commande, exécutez la commande suivante pour installer les dépendances du projet et exécuter le projet : 🎜rrreee🎜Maintenant, vous pouvez accéder à la page du projet pour afficher et modifier les informations sur les étudiants. Cliquez sur le bouton "Exporter les données" et vous pourrez exporter les données vers un fichier Excel. Après avoir sélectionné le fichier Excel, vous pouvez analyser le fichier et traiter les données. 🎜🎜Résumé🎜🎜Grâce à la coopération tacite de Vue et Excel, nous pouvons facilement modifier et exporter des données par lots. Que ce soit dans un système de gestion d’entreprise ou dans un projet personnel, cette méthode peut grandement améliorer l’efficacité de la gestion et du traitement des données. Dans le même temps, nous pouvons également étendre cette méthode pour obtenir des fonctions plus riches basées sur les besoins réels. 🎜

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!