L'exportation de données au format Excel est une fonctionnalité récurrente dans les applications web. Pour un projet Vue.js, la bibliothèque SheetJS (xlsx) est la solution de référence pour générer des fichiers .xlsx côté client sans complexité excessive.

Configuration initiale

Pour commencer, installez la dépendance nécessaire via votre gestionnaire de paquets :

npm install xlsx

Dans votre composant Vue, importez les utilitaires de la bibliothèque :

import * as XLSX from 'xlsx';

Génération à partir d'un tableau de tableaux (AOA)

La méthode aoa_to_sheet est idéale lorsque vos données sont déjà structurées sous forme de matrice (tableau de listes).

const exporterDepuisTableau = () => {
  const entetes = ["Identifiant", "Produit", "Prix"];
  const donnees = [
    [101, "Clavier Mécanique", "85.00€"],
    [102, "Souris Sans Fil", "45.00€"],
    [103, "Écran 27 pouces", "220.00€"]
  ];

  // Fusion des entêtes et des données
  const contenu = [entetes, ...donnees];

  // Création du classeur et de la feuille
  const classeur = XLSX.utils.book_new();
  const feuille = XLSX.utils.aoa_to_sheet(contenu);

  // Injection de la feuille dans le classeur
  XLSX.utils.book_append_sheet(classeur, feuille, "Inventaire");

  // Téléchargement du fichier
  XLSX.writeFile(classeur, `Export_${Date.now()}.xlsx`);
};

Exportation à partir d'obejts JSON

Si vos données proviennent d'une API sous forme d'objets, l'utilitaire json_to_sheet permet une conversion directe. Vous pouvez mapper les clés pour définir l'ordre et le nom des colonnes.

const exporterJsonVersExcel = () => {
  const listeUtilisateurs = [
    { id: 1, nom: "Alice", email: "alice@example.com" },
    { id: 2, nom: "Bob", email: "bob@example.com" },
    { id: 3, nom: "Charlie", email: "charlie@example.com" }
  ];

  // Transformation des données pour l'export
  const mappingDonnees = listeUtilisateurs.map(u => ({
    "ID Utilisateur": u.id,
    "Nom Complet": u.nom,
    "Adresse Courriel": u.email
  }));

  const classeur = XLSX.utils.book_new();
  const feuille = XLSX.utils.json_to_sheet(mappingDonnees);

  XLSX.utils.book_append_sheet(classeur, feuille, "Utilisateurs");
  XLSX.writeFile(classeur, "Liste_Utilisateurs.xlsx");
};

Gestion multi-feuiles et mise en forme des colonnes

Pour des besoins plus avancés, comme la création d'un fichier contenant plusieurs onglets ou la définition de la largeur des colonnes (pour éviter que le texte ne soit coupé), utilisez la propriété !cols.

const exportAvance = (configuration) => {
  const { titreFichier, onglets, dimensions } = configuration;
  const wb = XLSX.utils.book_new();

  onglets.forEach(section => {
    const ws = XLSX.utils.aoa_to_sheet([section.colonnes, ...section.lignes]);
    
    // Définition de la largeur des colonnes (wch représente la largeur en caractères)
    if (dimensions) {
      ws['!cols'] = dimensions;
    }

    XLSX.utils.book_append_sheet(wb, ws, section.nomFeuille);
  });

  XLSX.writeFile(wb, `${titreFichier}.xlsx`);
};

// Exemple d'appel pour un rapport scolaire
const genererRapportScolaire = () => {
  const config = {
    titreFichier: "Rapport_Annuel_Ecole",
    dimensions: [{ wch: 15 }, { wch: 10 }, { wch: 25 }],
    onglets: [
      {
        nomFeuille: "Classe A",
        colonnes: ["Nom", "Note", "Commentaire"],
        lignes: [["Dupont", 15, "Bon travail"], ["Martin", 12, "Encourageant"]]
      },
      {
        nomFeuille: "Classe B",
        colonnes: ["Nom", "Note", "Commentaire"],
        lignes: [["Petit", 18, "Excellent"], ["Leroy", 9, "Doit progresser"]]
      }
    ]
  };
  
  exportAvance(config);
};

L'objet !cols reçoit un tableau d'objets où chaque élément définit la largeur d'une colonne respective. Par exemple, { wch: 20 } fixe la largeur de la colonne à environ 20 caractères standards.