Exportation d’un tableau HTML vers Excel [.xls, .csv] utiliser JavaScript Tutoriel

Posté Par: Windows2022tutosur: décembre 13, 2022Dans: TechPas De Commentaires

Dans ce tutoriel, vous apprendrez à Exporter des données de tableau HTML vers des feuilles de calcul Excel et des fichiers CSV en utilisant JavaScript. Ce tutoriel vise à fournir à l’étudiant IT/CS et aux nouveaux programmeurs une référence pour apprendre à exporter des données vers Excel en utilisant uniquement Pure JavaScript. Ici, je vais fournir des exemples d’extraits sur la façon d’atteindre les objectifs de ce didacticiel. Un fichier zip de code source d’exemple de programme de travail est également fourni et peut être téléchargé gratuitement.

Dans certains programmes ou applications Web, la gestion nécessite souvent une exportation des données du système vers des feuilles de calcul Excel ou des fichiers CSV. Généralement, le but de cette fonctionnalité est d’extraire les données qui permettent à la gestion du système de les utiliser à d’autres fins. Les fonctionnalités d’exportation vers Excel sont généralement implémentées avec la fonctionnalité de rapport du programme.

Comment exporter un tableau HTML vers un fichier Excel à l’aide de JS ?

Il existe de nombreuses façons de Exporter les données du tableau à CSV ou Feuille de calcul Excel. Certains développeurs ont préféré utiliser des plugins ou des bibliothèques gratuits pour rendre cela possible. En utilisant des méthodes intégrées JavaScript et de courtes lignes de script, nous pouvons également réaliser ladite fonctionnalité pour notre application Web. JavaScript est livré avec un Goutte objet qui est très utile pour atteindre notre objectif ici. Nous pouvons simplement générer un fichier de données brutes de la Tableau HTML et créer une URL d’objet à mettre dans un ancre balise qui nous permet de télécharger le fichier.

Qu’est-ce que JS Blob ?

Un blob est un objet immuable, semblable à un fichier, avec des données brutes ; il peut être lu comme du texte ou des données binaires ou transformé en un ReadableStream afin que ses méthodes puissent être utilisées pour traiter les données. L’objet Blob de JavaScript représente des blobs.

Étapes de l’exportation des données d’un tableau vers Excel [.xls, .csv]?

Exporter en tant que fichier de feuille de calcul Excel

Obtenez le HTML externe de la table dans JS et placez-le dans une nouvelle chaîne de document HTML
Convertissez la chaîne de document HTML en un Goutte objet à l’aide de application/vnd.openxmlformats-officedocument.spreadsheetml.sheet type de contenu.
Créé un Ancre Élément
Définissez un Télécharger attribut à l’ancre avec le nom de fichier comme valeur c’est-à-dire exportsData.xls
Créé un URL de l’objet de la Goutte objet et placez-le dans l’ancre href attribut
Ajouter la balise d’ancrage au corps du document de la page
Déclencheur Cliquez sur la balise d’ancrage pour télécharger le fichier exporté

Exporter en tant que fichier CSV

Obtenez le HTML externe de la table dans JS et placez-le dans une nouvelle chaîne de document HTML
Convertissez la chaîne de document HTML en un objet Blob à l’aide de la texte/csv type de contenu.
Créer un élément d’ancrage
Définissez un Télécharger attribut à l’ancre avec le nom de fichier comme valeur c’est-à-dire exportsData.csv
Créé un URL de l’objet de la Goutte objet et placez-le dans l’ancre href attribut
Joindre le Ancre Balise au corps du document de la page
Déclencheur Cliquez sur la balise d’ancrage pour télécharger le fichier exporté

Extraits

Comment exporter un tableau HTML vers une feuille de calcul Excel ?

À l’aide de l’extrait de code suivant, nous pouvons facilement exporter les données du tableau dans un fichier (.xls) ou une feuille de calcul Excel. Le script suivant utilise l’objet Blob pour convertir HTML en un blob à l’aide de la application/vnd.openxmlformats-officedocument.spreadsheetml.sheet type de contenu.

document.getElementById("exportTable").addEventListener("click", function(e){
 
    e.preventDefault()
 
    var _tbl = document.getElementById('exampleTbl').outerHTML
 
    var excel_content = `<html><body>${_tbl}</body></html>`
 
    var file = new Blob([excel_content], {type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
    var dl_anchor = document.createElement('a')
    dl_anchor.style.display = this.nonce;
    dl_anchor.download = "tableData.xls";
    dl_anchor.href = window.URL.createObjectURL(file);
 
    document.body.appendChild(dl_anchor)
    dl_anchor.click()
 
})

Comment exporter un tableau HTML vers CSV ?

L’extrait suivant présente une similitude avec le premier extrait que j’ai fourni. La seule différence est que les données du tableau ont été extraites des cellules du tableau. Les lignes du tableau sont séparées par (\r\n) ou délimiteur de ligne suivante et chaque cellule de la ligne est séparée à l’aide de la virgule (,). A part ça, le Goutte le type de contenu doit être texte/csv.

document.getElementById("exportTableCSV").addEventListener("click", function(e){
 
    e.preventDefault()
 
    var _tbl_rows = document.querySelectorAll('#exampleTbl tr')
    var csv ="";
    var rows = []
    _tbl_rows.forEach(el => {
        var row = []
        el.querySelectorAll('th, td').forEach(ele => {
            var ele_clone = ele.cloneNode(true)
            ele_clone.innerText = (ele_clone.innerText).replace(/\"/gi, '\"\"')
            ele_clone.innerText = ('"' + ele_clone.innerText + '"')
            row.push(ele_clone.innerText)
        })
        rows.push(row.join(","));
    })
    csv += rows.join(`\r\n`)
    var file = new Blob([csv], {type:'text/csv'});
    var dl_anchor = document.createElement('a')
    dl_anchor.style.display = this.nonce;

  


    dl_anchor.download = "tableCsv.csv";
    dl_anchor.href = window.URL.createObjectURL(file);
 
    document.body.appendChild(dl_anchor)
    dl_anchor.click()
})

En utilisant le Extraits de code JavaScript que j’ai fourni ci-dessus, nous pouvons atteindre notre but et objectif de ce tutoriel qui est de exporter Données de tableau dans une feuille de calcul Excel et un fichier CSV. Ce qui suit est l’extrait d’un programme simple qui illustre l’utilisation de l’extrait ci-dessus.

Exemple

Interface

En supposant que nous ayons une page d’application avec un tableau HTML qui affiche une liste d’enregistrements. Voici un exemple de script d’interface de page d’application. Le script est connu sous le nom de index.html dossier.

Javascript

Ensuite, créez le fichier JavaScript qui contient le script pour exporter les données de la table vers .xls et .csv des dossiers. Ce fichier est chargé au index.html fichier et est connu sous le nom de script.js.

/**
* Exporting Table Data into Excel
*/
 
document.getElementById("exportTable").addEventListener("click", function(e){
 
    e.preventDefault()
 
    var _tbl = document.getElementById('exampleTbl').outerHTML
 
    var excel_content = `<html><body>${_tbl}</body></html>`
 
    var file = new Blob([excel_content], {type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
    var dl_anchor = document.createElement('a')
    dl_anchor.style.display = this.nonce;
    dl_anchor.download = "tableData.xls";
    dl_anchor.href = window.URL.createObjectURL(file);
 
    document.body.appendChild(dl_anchor)
    dl_anchor.click()
 
})
 
/**
* Exporting Table Data into CSV
*/
 
document.getElementById("exportTableCSV").addEventListener("click", function(e){
 
    e.preventDefault()
 
    var _tbl_rows = document.querySelectorAll('#exampleTbl tr')
    var csv ="";
    var rows = []
    _tbl_rows.forEach(el => {
        var row = []
        el.querySelectorAll('th, td').forEach(ele => {
            var ele_clone = ele.cloneNode(true)
            ele_clone.innerText = (ele_clone.innerText).replace(/\"/gi, '\"\"')
            ele_clone.innerText = ('"' + ele_clone.innerText + '"')
            row.push(ele_clone.innerText)
        })
        rows.push(row.join(","));
    })
    csv += rows.join(`\r\n`)
    var file = new Blob([csv], {type:'text/csv'});
    var dl_anchor = document.createElement('a')
    dl_anchor.style.display = this.nonce;
    dl_anchor.download = "tableCsv.csv";
    dl_anchor.href = window.URL.createObjectURL(file);
 
    document.body.appendChild(dl_anchor)
    dl_anchor.click()
})

Instantanés

Voici les instantanés du résultat du code source du programme que j’ai fourni ci-dessus.

Interface des pages

Feuille de calcul Excel exportée

Fichier CSV exporté

Voilà! Vous pouvez maintenant tester l’exemple de programme de votre côté et voir s’il fonctionne correctement. J’ai également fourni le fichier de code source complet de l’exemple de programme que j’ai créé pour ce tutoriel. Vous pouvez le télécharger en cliquant sur le bouton de téléchargement sous cet article.

C’est ça! C’est la fin de ce tutoriel. J’espère Cela Exportation d’un tableau HTML vers une feuille de calcul Excel et un fichier CSV à l’aide du didacticiel JavaScript vous aidera avec ce que vous cherchez et vous trouverez cela utile pour vos projets actuels et futurs.

Explorez plus sur ce site Web pour plus Tutoriels et Codes sources gratuits.