Comment utiliser Vue et Excel pour implémenter le filtrage par lots et l'exportation de données

Comment utiliser Vue et Excel pour implémenter le filtrage par lots et l'exportation de données

Dans le développement de projets réels, nous avons souvent besoin de filtrer et d'exporter une grande quantité de données. En tant que framework frontal populaire, Vue peut être utilisé conjointement avec des outils tels qu'Excel pour mettre en œuvre rapidement et facilement le filtrage par lots et l'exportation de données. Cet article expliquera comment utiliser Vue et Excel pour implémenter cette fonction et fournira des exemples de code comme référence.

1. Préparation
   Tout d'abord, nous devons installer et introduire Vue et les plug-ins et bibliothèques associés. Des didacticiels d'installation et d'utilisation pertinents peuvent être trouvés dans la documentation officielle de Vue. Dans cet article, nous utiliserons Vue CLI pour créer un projet Vue de base. Les opérations spécifiques sont les suivantes :

1.1 Installer Vue CLI :
Entrez la commande suivante sur la ligne de commande pour installer Vue CLI.

npm install -g @vue/cli

1.2 Créer un projet Vue :
Entrez la commande suivante sur la ligne de commande pour créer un nouveau projet Vue.

vue create vue-excel-demo

Suivez ensuite les instructions pour sélectionner la configuration et les plugins par défaut.

1.3 Installez le plug-in Vue Excel :
Entrez le répertoire du projet sur la ligne de commande et entrez les commandes suivantes pour installer le plug-in Vue Excel et les dépendances associées.

cd vue-excel-demo
npm install vue-excel-export xlsx

2. Créez une table de données
   Créez un dossier de composants dans le répertoire src du projet et créez un fichier ExcelTable.vue sous le dossier. Dans le fichier ExcelTable.vue, nous allons créer un tableau de données simple pour afficher et filtrer les données. L'exemple de code est le suivant :

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入筛选关键字" />
    <button @click="filterData">筛选</button>
    <button @click="exportData">导出</button>

    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { export_json_to_excel } from "xlsx";

export default {
  data() {
    return {
      data: [
        { id: 1, name: "张三", age: 18, gender: "男" },
        { id: 2, name: "李四", age: 20, gender: "女" },
        { id: 3, name: "王五", age: 22, gender: "男" }
      ],
      keyword: ""
    };
  },
  computed: {
    filteredData() {
      if (this.keyword === "") {
        return this.data;
      } else {
        return this.data.filter(item => item.name.includes(this.keyword));
      }
    }
  },
  methods: {
    filterData() {
      console.log("筛选数据");
      // 这里可以进行筛选逻辑的处理
    },
    exportData() {
      console.log("导出数据");
      const jsonData = JSON.parse(JSON.stringify(this.filteredData));
      const worksheet = xlsx.utils.json_to_sheet(jsonData);
      const workbook = xlsx.utils.book_new();
      xlsx.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      const excelBuffer = xlsx.write(workbook, {
        bookType: "xlsx",
        type: "array"
      });
      const data = new Blob([excelBuffer], { type: "application/octet-stream" });
      FileSaver.saveAs(data, "导出数据.xlsx");
    }
  }
};
</script>

Dans le code ci-dessus, nous créons une table de données simple et utilisons l'instruction v-for pour parcourir les données de rendu. Dans le même temps, nous utilisons un attribut calculé filteredData pour implémenter la fonction de filtrage des données et filtrer dynamiquement les données en fonction des mots-clés saisis. La logique spécifique de la fonction de filtrage peut être étendue en fonction des besoins réels.

3. Utilisez le plug-in Vue Excel pour exporter des données
   Dans le code ci-dessus, nous implémentons la fonction d'exportation de données en cliquant sur le bouton d'exportation. Lorsque l'utilisateur clique sur le bouton d'exportation, nous convertissons d'abord les données filtrées dans la structure de données de la feuille de calcul Excel, puis utilisons le plug-in Vue Excel pour exporter les données de la feuille de calcul dans un fichier Excel. L'exemple de code est le suivant :

// 导入相关库
import { export_json_to_excel } from "xlsx";
import FileSaver from "file-saver";

// 导出数据
exportData() {
  console.log("导出数据");
  // 将筛选后的数据转换为Excel的工作表数据结构
  const jsonData = JSON.parse(JSON.stringify(this.filteredData));
  const worksheet = xlsx.utils.json_to_sheet(jsonData);
  
  // 创建并配置Excel工作簿
  const workbook = xlsx.utils.book_new();
  xlsx.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  
  // 导出Excel文件
  const excelBuffer = xlsx.write(workbook, {
    bookType: "xlsx",
    type: "array"
  });
  const data = new Blob([excelBuffer], { type: "application/octet-stream" });
  FileSaver.saveAs(data, "导出数据.xlsx");
}

Dans le code ci-dessus, nous convertissons d'abord les données filtrées jsonData en feuille de calcul de structure de données de feuille de calcul Excel, puis créons un classeur Excel et ajoutons la feuille de calcul au classeur. Enfin, nous utilisons la bibliothèque FileSaver pour convertir le classeur en fichier Excel et l'enregistrer localement.

4. Conclusion
   En utilisant Vue et Excel, nous pouvons facilement mettre en œuvre des fonctions complexes de gestion et d'exportation de données. Cet article explique comment utiliser Vue et Excel pour implémenter le filtrage par lots et l'exportation de données, et fournit des exemples de code spécifiques pour référence aux lecteurs. J'espère que cet article sera utile à tout le monde dans le développement réel.

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!