Maison > interface Web > Voir.js > le corps du texte

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

王林
Libérer: 2023-07-21 10:59:04
original
1324 Les gens l'ont consulté

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
Copier après la connexion

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

import VueXlsx from 'vue-xlsx'
Vue.use(VueXlsx)
Copier après la connexion
  1. 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>
Copier après la connexion

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.

  1. 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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal