Le partenaire en or de Vue et Excel : comment filtrer et exporter dynamiquement les données

Le partenaire en or de Vue et Excel : comment filtrer et exporter dynamiquement des données

Avec le développement rapide de la technologie Internet, le nombre et les fonctions des applications Web deviennent de plus en plus riches. L’un des besoins les plus courants est l’affichage et l’exportation de données. Dans un framework front-end comme Vue.js, nous pouvons facilement implémenter un filtrage dynamique et une exportation de données. Afin de mieux répondre aux besoins des utilisateurs, nous pouvons le coupler avec Excel pour fournir des fonctions d'exploitation et d'analyse des données plus puissantes.

Cet article expliquera comment utiliser Vue.js pour afficher des données via des tableaux et implémenter des fonctions de filtrage et d'exportation dynamiques. Dans l'implémentation spécifique, nous utiliserons Element UI, une excellente bibliothèque de composants d'interface utilisateur, et xlsx, une puissante bibliothèque d'opérations sur les fichiers Excel.

1. Préparation
   Tout d'abord, nous devons installer Vue CLI et créer un nouveau projet Vue. Dans le répertoire du projet, exécutez la commande suivante :

   npm install -g @vue/cli
   vue create excel-demo
   cd excel-demo

   Ensuite, sélectionnez la configuration par défaut.

Ensuite, nous devons installer Element UI et xlsx. Dans le répertoire du projet, exécutez la commande suivante :

npm install element-ui xlsx

2. Pour implémenter l'affichage des données
   Dans le répertoire src, créez un dossier nommé vues et créez-y un fichier nommé Home.vue. Ensuite, nous pouvons commencer à éditer le fichier Home.vue.

Tout d'abord, introduisez les composants et les styles nécessaires :

<template>
  <div class="home">
    <el-row>
      <el-col :span="6">
        <h3>数据过滤</h3>
        <el-input v-model="keyword" placeholder="请输入关键字"></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <h3>数据展示</h3>
        <el-table :data="filteredData" border>
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-download" @click="exportData">导出数据</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { exportJsonToExcel } from "@/utils/exportExcel.js";

export default {
  data() {
    return {
      keyword: ""
    };
  },
  computed: {
    ...mapState(["data"]),
    filteredData() {
      return this.data.filter(item =>
        item.name.includes(this.keyword)
      );
    }
  },
  methods: {
    exportData() {
      exportJsonToExcel(this.filteredData, "data");
    }
  }
};
</script>

<style scoped>
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>

3. Exportation de données
   Dans le répertoire src/utils, créez un fichier nommé exportExcel.js. Ensuite, nous pouvons commencer à éditer le fichier exportExcel.js.

import XLSX from "xlsx";

export function exportJsonToExcel(json, fileName) {
  const data = json.map(item => {
    return {
      ID: item.id,
      姓名: item.name,
      年龄: item.age
    };
  });

  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  const excelBuffer = XLSX.write(workbook, {
    bookType: "xlsx",
    type: "array"
  });
  saveAsExcel(excelBuffer, fileName);
}

function saveAsExcel(buffer, fileName) {
  const data = new Blob([buffer], { type: "application/octet-stream" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(data);
  link.download = fileName + ".xlsx";
  link.click();
}

Après avoir terminé les étapes ci-dessus, nous pouvons exécuter notre projet Vue et expérimenter les fonctions de filtrage dynamique et d'exportation de données.

Résumé
Grâce au partenariat en or de Vue.js et Excel, nous pouvons facilement mettre en œuvre un filtrage et une exportation dynamiques des données. Dans les applications réelles, nous pouvons étendre et optimiser davantage ces fonctions en fonction de besoins spécifiques afin d'offrir une meilleure expérience utilisateur et des capacités d'analyse de données. J'espère que cet article pourra vous être utile, merci d'avoir lu !

Annexe
L'exemple de code complet peut être trouvé dans mon Github : [https://github.com/example/repo](https://github.com/example/repo)

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!