Interaction efficace entre Vue et Excel : comment réaliser le remplissage par lots et l'importation de données

Interaction efficace entre Vue et Excel : comment réaliser le remplissage et l'importation de données par lots

Dans la plupart des projets, le remplissage par lots et l'importation de données sont une exigence courante. En tant qu'outil de traitement de données populaire, Excel, combiné au framework Vue, peut réaliser une interaction efficace des données. Cet article expliquera comment remplir et importer des données par lots via Vue et certains plug-ins couramment utilisés, et fournira des exemples de code.

1. Utilisez le plug-in vue-xlsx pour lire et écrire des fichiers Excel
   vue-xlsx est un composant Vue basé sur le plug-in js-xlsx, qui nous permet de lire et d'écrire directement des fichiers Excel via Vue. Nous pouvons utiliser la commande suivante pour installer vue-xlsx :

npm install vue-xlsx -S

Ensuite, introduisez vue-xlsx dans le fichier main.js du projet Vue :

import VueXlsx from 'vue-xlsx'
Vue.use(VueXlsx)

2. Implémentez la fonction de remplissage par lots des données
   Supposons que nous ayons un fichier contenant les noms et les notes des étudiants. Pour les fichiers Excel, nous pouvons implémenter le remplissage par lots des données via le code suivant :

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <table>
      <thead>
        <tr>
          <th>学生姓名</th>
          <th>成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in students" :key="index">
          <td>{{ student.name }}</td>
          <td>{{ student.score }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: []
    }
  },
  methods: {
    handleFileUpload(event) {
      this.students = []
      const file = event.target.files[0]
      const reader = new FileReader()

      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result)
        const workbook = this.$xlsx.read(data, { type: 'array' })
        const sheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[sheetName]
        const jsonData = this.$xlsx.utils.sheet_to_json(worksheet, { header: 1 })

        jsonData.forEach((row, index) => {
          if (index !== 0) {
            const student = { name: row[0], score: row[1] }
            this.students.push(student)
          }
        })
      }

      reader.readAsArrayBuffer(file)
    }
  }
}
</script>

Dans le code ci-dessus, nous ajoutons d'abord une balise d'entrée pour le téléchargement du fichier vers le modèle et écoutons l'événement de changement. Lorsque l'utilisateur sélectionne le fichier Excel, le fichier sera lu et la méthode handleFileUpload sera déclenchée.

Dans la méthode, this.students est d'abord effacé, puis FileReader est utilisé pour lire le contenu du fichier. Une fois la lecture terminée, utilisez l'objet this.$xlsx de vue-xlsx pour analyser le contenu du fichier et convertissez les données au format Excel au format JSON via la méthode this.$xlsx.utils.sheet_to_json.

Enfin, nous convertissons les données JSON ligne par ligne en objets étudiants et les ajoutons au tableau this.students. Utilisez l'instruction v-for dans le modèle pour parcourir le tableau et afficher les noms et les notes des étudiants.

3. Implémenter la fonction d'importation de données
   En plus du remplissage par lots, nous pouvons également implémenter la fonction d'importation de données pour importer des données dans Excel dans un formulaire ou une base de données dans Vue. Voici un exemple simple :

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <form>
      <div>
        <label>学生姓名：</label>
        <input v-model="student.name" />
      </div>
      <div>
        <label>成绩：</label>
        <input v-model="student.score" />
      </div>
      <button @click="importData">导入数据</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {}
    }
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0]
      const reader = new FileReader()

      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result)
        const workbook = this.$xlsx.read(data, { type: 'array' })
        const sheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[sheetName]
        const jsonData = this.$xlsx.utils.sheet_to_json(worksheet, { header: 1 })

        if (jsonData.length > 0) {
          const row = jsonData[1]
          this.student = { name: row[0], score: row[1] }
        }
      }

      reader.readAsArrayBuffer(file)
    },
    importData() {
      // 将this.student中的数据导入表单或数据库
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons un formulaire pour afficher les données à importer, qui contient des zones de saisie pour les noms et les notes des étudiants. Lorsque l'utilisateur sélectionne le fichier Excel, le contenu du fichier est analysé de la même manière et la première ligne de données est utilisée comme données importées.

Les utilisateurs peuvent modifier les données dans la zone de saisie, puis cliquer sur le bouton "Importer des données" et exécuter la méthode importData pour importer les données de this.student dans le formulaire ou la base de données.

Grâce aux exemples de code ci-dessus, nous pouvons voir l'interaction efficace entre Vue et Excel. Qu'il s'agisse de remplissage par lots ou d'importation de données, l'utilisation du plug-in Vue et vue-xlsx peut simplifier le processus de développement et améliorer l'efficacité du travail.

Résumé
Cet article explique comment réaliser le remplissage par lots et l'importation de données via le plug-in Vue et vue-xlsx. En installant et en utilisant correctement le plug-in vue-xlsx, nous pouvons facilement lire et écrire des fichiers Excel et les utiliser avec le framework Vue. Qu'il s'agisse de besoins de gestion ou d'importation de données, une telle interaction efficace peut grandement améliorer l'efficacité du développement.

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!