Comment exporter un fichier Excel dans vue ?

J'ai rencontré quelque chose lors du développement aujourd'hui, à savoir comment exporter des fichiers Excel à l'aide de données existantes. Il existe de nombreuses méthodes sur Internet, et certaines parlent d'utiliser le flux de données, https://. www .cnblogs.com/yeqrblog/p/9758981.html, mais maintenant mon idée est d'utiliser simplement les données du tableau et de ne pas les implémenter avec un flux de données. Les faits ont prouvé que c'est possible :

. 1 .Installer les dépendances

//npm 
npm install -S file-saver xlsx
npm install -D script-loader

2. Importer Bolb.js et Export2Excel.js

Deux adresses de fichiers js dans main.js :

Lien : https://pan.baidu.com/s/1ib2Ox18FngVlhKxs6l8OZQ
Code d'extraction : sirm

import Blob from './excel/Blob'
import Export2Excel from './excel/Export2Excel.js'

3. Utilisation dans les composants

//导出的方法
exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../excel/Export2Excel');
        const tHeader = ['序号', '昵称', '姓名'];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['index', 'nickName', 'name'];
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '列表excel');
      })
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))

tHeader est l'en-tête de la table, les données dans filterVal sont le champ de la table, tableData stocke les données dans la table, le type est un tableau et les objets y sont stockés. est un objet.

C'est tout.

Recommandations associées :

Un résumé des questions d'entretien de vue frontale en 2020 (avec réponses)

tutoriel vue Recommandé : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

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!