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.
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)
<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.
<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!