L'exportation de données tabulaires vers un fichier Excel est un besoin courant dans les applications web. Voici une approche utilisant la bibliothèque SheetJS pour convertir un tableau HTML en fichier xlsx téléchargealbe, tout en préservant les types de données numériques.

Structure HTML

Créons d'abord un bouton de déclenchement et un tableau de données :

<button id="exportBtn" type="button" class="btn btn-light" onclick="exportTableToExcel()">
    ![Export](~/download.svg) Exporter
</button>

<div class="table-responsive">
    | Formulaire N° | Date de proposition | Catégorie | Proposant |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
</div>

Dépendances requises

Incluez les bibliothèques suivantes dans votre page :

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.core.min.js"></script>

Logique d'exportation

L'avantage principal de cette méthode est qu'elle préserve les types de données. Les valeurs numériques restent des nombres et non des chaînes de caractères, ce qui permet des calculs directement dans Excel.

<script>
    function exportTableToExcel() {
        const tableElement = document.getElementById('dataTable');
        const worksheet = XLSX.utils.table_to_sheet(tableElement);
        const excelBlob = generateExcelBlob(worksheet, 'Donnees');
        triggerDownload(excelBlob, 'Export_Donnees.xlsx');
    }

    function generateExcelBlob(worksheet, sheetLabel) {
        const sheetName = sheetLabel || 'Feuil1';
        const workbook = {
            SheetNames: [sheetName],
            Sheets: {}
        };
        workbook.Sheets[sheetName] = worksheet;

        const writeOptions = {
            bookType: 'xlsx',
            bookSST: false,
            type: 'binary'
        };

        const rawOutput = XLSX.write(workbook, writeOptions);
        return new Blob([convertToArrayBuffer(rawOutput)], {
            type: 'application/octet-stream'
        });
    }

    function convertToArrayBuffer(strData) {
        const buffer = new ArrayBuffer(strData.length);
        const byteArray = new Uint8Array(buffer);
        for (let idx = 0; idx < strData.length; idx++) {
            byteArray[idx] = strData.charCodeAt(idx) & 0xFF;
        }
        return buffer;
    }

    function triggerDownload(blobOrUrl, fileName) {
        let downloadUrl = blobOrUrl;
        if (blobOrUrl instanceof Blob) {
            downloadUrl = URL.createObjectURL(blobOrUrl);
        }

        const anchorElement = document.createElement('a');
        anchorElement.href = downloadUrl;
        anchorElement.download = fileName || '';

        const clickEvent = window.MouseEvent
            ? new MouseEvent('click')
            : createLegacyClickEvent();

        anchorElement.dispatchEvent(clickEvent);
    }

    function createLegacyClickEvent() {
        const evt = document.createEvent('MouseEvents');
        evt.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        return evt;
    }
</script>

Fonctionnement

1. La fonction exportTableToExcel récupère l'élément tableau par son identifiant
2. XLSX.utils.table_to_sheet convertit le tableau DOM en objet feuille de calcul
3. generateExcelBlob construit un classeur complet et génère un objett Blob binaire
4. triggerDownload crée un lien temporaire et simule un clic pour lancer le téléchargement

La conversion via convertToArrayBuffer transforem la chaîne binaire en ArrayBuffer, ce qui garantit la compatibilité avec l'API Blob du navigateur.