L'exportation des données de table html vers Excel à l'aide de JavaScript / JQuery ne fonctionne pas correctement dans le navigateur Chrome

Question 1

J'ai une table HTML dans un modèle de vitesse. Je veux exporter les données de la table html pour exceller en utilisant un script java ou jquery, comatibale avec tous les navigateurs. J'utilise le script ci-dessous

<script type="text/javascript">
function ExportToExcel(mytblId){
       var htmltable= document.getElementById('my-table-id');
       var html = htmltable.outerHTML;
       window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
    }
</script>

Ce script fonctionne très bien dans Mozilla Firefox , il apparaît avec une boîte de dialogue d'Excel et demande des options d'ouverture ou d'enregistrement. Mais lorsque j'ai testé le même script dans le navigateur Chrome, il ne fonctionne pas comme prévu, lorsque vous cliquez sur le bouton, il n'y a pas de fenêtre contextuelle pour Excel. Les données sont téléchargées dans un fichier avec "type de fichier: fichier", sans extension comme .xls. Il n'y a pas d'erreurs dans la console Chrome.

Exemple Jsfiddle:

http://jsfiddle.net/insin/cmewv/

Cela fonctionne bien dans Mozilla mais pas dans Chrome.

Cas de test du navigateur Chrome:

Première image: je clique sur le bouton Exporter vers Excel

et résultat:

Résultat

Question 2

Le script d'exportation Excel fonctionne sur IE7 +, Firefox et Chrome.

function fnExcelReport()
{
    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange; var j=0;
    tab = document.getElementById('headerTable'); // id of table

    for(j = 0 ; j < tab.rows.length ; j++) 
    {     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
        //tab_text=tab_text+"</tr>";
    }

    tab_text=tab_text+"</table>";
    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
    {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
    }  
    else                 //other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}

Créez simplement une iframe vierge:

<iframe id="txtArea1" style="display:none"></iframe>

Appelez cette fonction sur:

<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>

Question 3

Le plugin Datatable résout le mieux l'objectif et nous permet d'exporter les données de la table HTML dans Excel, PDF, TEXT. facilement configurable.

Veuillez trouver l'exemple complet dans le lien de référence datable ci-dessous:

https://datatables.net/extensions/buttons/examples/html5/simple.html

(capture d'écran du site de référence datable)

Question 4

Cela pourrait aider

function exportToExcel(){
var htmls = "";
            var uri = 'data:application/vnd.ms-excel;base64,';
            var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'; 
            var base64 = function(s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            };

            var format = function(s, c) {
                return s.replace(/{(\w+)}/g, function(m, p) {
                    return c[p];
                })
            };

            htmls = "YOUR HTML AS TABLE"

            var ctx = {
                worksheet : 'Worksheet',
                table : htmls
            }


            var link = document.createElement("a");
            link.download = "export.xls";
            link.href = uri + base64(format(template, ctx));
            link.click();
}

Question 5

http://wsnippets.com/export-html-table-data-excel-sheet-using-jquery/ essayez ce lien, cela pourrait résoudre votre problème

entrez la description de l'image ici

Question 6

Au lieu d'utiliser, window.openvous pouvez utiliser un lien avec l' onclickévénement.
Et vous pouvez mettre la table html dans l'URI et définir le nom du fichier à télécharger.

Démo en direct:

function exportF(elem) {
  var table = document.getElementById("table");
  var html = table.outerHTML;
  var url = 'data:application/vnd.ms-excel,' + escape(html); // Set your html table into url 
  elem.setAttribute("href", url);
  elem.setAttribute("download", "export.xls"); // Choose the file name
  return false;
}

<table id="table" border="1">
  <tr>
    <td>
      Foo
    </td>
    <td>
      Bar
    </td>
  </tr>
</table>

<a id="downloadLink" onclick="exportF(this)">Export to excel</a>

Développer l'extrait

Question 7

TableExport - La bibliothèque simple et facile à mettre en œuvre pour exporter des tableaux HTML vers des fichiers xlsx, xls, csv et txt.

Pour utiliser cette bibliothèque, appelez simplement le TableExportconstructeur:

new TableExport(document.getElementsByTagName("table"));

// OR simply

TableExport(document.getElementsByTagName("table"));

// OR using jQuery

$("table").tableExport();

Des propriétés supplémentaires peuvent être transmises pour personnaliser l'apparence de vos tables, boutons et données exportées. Voir ici plus d'infos

Question 8

Ma fusion de ces exemples:

https://www.codexworld.com/export-html-table-data-to-excel-using-javascript https://bl.ocks.org/Flyer53/1de5a78de9c89850999c

function exportTableToExcel(tableId, filename) {
    let dataType = 'application/vnd.ms-excel';
    let extension = '.xls';

    let base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s)))
    };

    let template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';
    let render = function(template, content) {
        return template.replace(/{(\w+)}/g, function(m, p) { return content[p]; });
    };

    let tableElement = document.getElementById(tableId);

    let tableExcel = render(template, {
        worksheet: filename,
        table: tableElement.innerHTML
    });

    filename = filename + extension;

    if (navigator.msSaveOrOpenBlob)
    {
        let blob = new Blob(
            [ '\ufeff', tableExcel ],
            { type: dataType }
        );

        navigator.msSaveOrOpenBlob(blob, filename);
    } else {
        let downloadLink = document.createElement("a");

        document.body.appendChild(downloadLink);

        downloadLink.href = 'data:' + dataType + ';base64,' + base64(tableExcel);

        downloadLink.download = filename;

        downloadLink.click();
    }
}

Question 9

Vous pouvez utiliser une bibliothèque comme ShieldUI pour ce faire.

Il prend en charge l'exportation vers les formats Excel largement utilisés XML et XLSX.

Plus de détails ici: http://demos.shieldui.com/web/grid-general/export-to-excel

Question 10

En ce qui concerne la réponse des sampopes du 6 juin 14 à 11:59:

J'ai inséré un style css avec une taille de police de 20px pour afficher les données Excel plus grandes. Dans le code de sampopes, les <tr>balises de tête sont manquantes, donc je commence par afficher le titre et que les autres lignes de tableaux dans une boucle.

function fnExcelReport()
{
    var tab_text = '<table border="1px" style="font-size:20px" ">';
    var textRange; 
    var j = 0;
    var tab = document.getElementById('DataTableId'); // id of table
    var lines = tab.rows.length;

    // the first headline of the table
    if (lines > 0) {
        tab_text = tab_text + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>';
    }

    // table data lines, loop starting from 1
    for (j = 1 ; j < lines; j++) {     
        tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</tr>";
    }

    tab_text = tab_text + "</table>";
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");             //remove if u want links in your table
    tab_text = tab_text.replace(/<img[^>]*>/gi,"");                 // remove if u want images in your table
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");    // reomves input params
    // console.log(tab_text); // aktivate so see the result (press F12 in browser)

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

     // if Internet Explorer
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa = txtArea1.document.execCommand("SaveAs", true, "DataTableExport.xls");
    }  
    else // other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}

Question 11

 function exportToExcel() {
        var tab_text = "<tr bgcolor='#87AFC6'>";
        var textRange; var j = 0, rows = '';
        tab = document.getElementById('student-detail');
        tab_text = tab_text + tab.rows[0].innerHTML + "</tr>";
        var tableData = $('#student-detail').DataTable().rows().data();
        for (var i = 0; i < tableData.length; i++) {
            rows += '<tr>'
                + '<td>' + tableData[i].value1 + '</td>'
                + '<td>' + tableData[i].value2 + '</td>'
                + '<td>' + tableData[i].value3 + '</td>'
                + '<td>' + tableData[i].value4 + '</td>'
                + '<td>' + tableData[i].value5 + '</td>'
                + '<td>' + tableData[i].value6 + '</td>'
                + '<td>' + tableData[i].value7 + '</td>'
                + '<td>' +  tableData[i].value8 + '</td>'
                + '<td>' + tableData[i].value9 + '</td>'
                + '<td>' + tableData[i].value10 + '</td>'
                + '</tr>';
        }
        tab_text += rows;
        var data_type = 'data:application/vnd.ms-excel;base64,',
            template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table border="2px">{table}</table></body></html>',
            base64 = function (s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            },
            format = function (s, c) {
                return s.replace(/{(\w+)}/g, function (m, p) {
                    return c[p];
                })
            }

        var ctx = {
            worksheet: "Sheet 1" || 'Worksheet',
            table: tab_text
        }
        document.getElementById("dlink").href = data_type + base64(format(template, ctx));
        document.getElementById("dlink").download = "StudentDetails.xls";
        document.getElementById("dlink").traget = "_blank";
        document.getElementById("dlink").click();
    }

Développer l'extrait

Ici, les valeurs 1 à 10 sont les noms de colonnes que vous obtenez

Question 12

Vous pouvez utiliser tableToExcel.js pour exporter la table dans un fichier Excel.

Cela fonctionne de la manière suivante:

1). Incluez ce CDN dans votre projet / fichier

<script src="https://cdn.jsdelivr.net/gh/linways/[email protected]/dist/tableToExcel.js"></script>

2). Soit en utilisant JavaScript:

<button id="btnExport" onclick="exportReportToExcel(this)">EXPORT REPORT</button>

function exportReportToExcel() {
  let table = document.getElementsByTagName("table"); // you can use document.getElementById('tableId') as well by providing id to the table tag
  TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
    name: `export.xlsx`, // fileName you could use any name
    sheet: {
      name: 'Sheet 1' // sheetName
    }
  });
}

3). Ou en utilisant Jquery

<button id="btnExport">EXPORT REPORT</button>

$(document).ready(function(){
    $("#btnExport").click(function() {
        let table = document.getElementsByTagName("table");
        TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
           name: `export.xlsx`, // fileName you could use any name
           sheet: {
              name: 'Sheet 1' // sheetName
           }
        });
    });
});

Vous pouvez vous référer à ce lien github pour toute autre information

https://github.com/linways/table-to-excel/tree/master

ou pour référencer l'exemple en direct, visitez le lien suivant

https://codepen.io/rohithb/pen/YdjVbb

J'espère que cela aidera quelqu'un :-)

Question 13

Ma version de @sampopes répond

function exportToExcel(that, id, hasHeader, removeLinks, removeImages, removeInputParams) {
if (that == null || typeof that === 'undefined') {
    console.log('Sender is required');
    return false;
}

if (!(that instanceof HTMLAnchorElement)) {
    console.log('Sender must be an anchor element');
    return false;
}

if (id == null || typeof id === 'undefined') {
    console.log('Table id is required');
    return false;
}
if (hasHeader == null || typeof hasHeader === 'undefined') {
    hasHeader = true;
}
if (removeLinks == null || typeof removeLinks === 'undefined') {
    removeLinks = true;
}
if (removeImages == null || typeof removeImages === 'undefined') {
    removeImages = false;
}
if (removeInputParams == null || typeof removeInputParams === 'undefined') {
    removeInputParams = true;
}

var tab_text = "<table border='2px'>";
var textRange;

tab = $(id).get(0);

if (tab == null || typeof tab === 'undefined') {
    console.log('Table not found');
    return;
}

var j = 0;

if (hasHeader && tab.rows.length > 0) {
    var row = tab.rows[0];
    tab_text += "<tr bgcolor='#87AFC6'>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[0].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
    j++;
}

for (; j < tab.rows.length; j++) {
    var row = tab.rows[j];
    tab_text += "<tr>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[j].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
}

tab_text = tab_text + "</table>";
if (removeLinks)
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");
if (removeImages)
    tab_text = tab_text.replace(/<img[^>]*>/gi, ""); 
if (removeInputParams)
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
{
    myIframe.document.open("txt/html", "replace");
    myIframe.document.write(tab_text);
    myIframe.document.close();
    myIframe.focus();
    sa = myIframe.document.execCommand("SaveAs", true, document.title + ".xls");
    return true;
}
else {
    //other browser tested on IE 11
    var result = "data:application/vnd.ms-excel," + encodeURIComponent(tab_text);
    that.href = result;
    that.download = document.title + ".xls";
    return true;
}
}

Nécessite un iframe

<iframe id="myIframe" style="opacity: 0; width: 100%; height: 0px;" seamless="seamless"></iframe>

Usage

$("#btnExportToExcel").click(function () {
    exportToExcel(this, '#mytable');
});

Answer 1

J'ai une table HTML dans un modèle de vitesse. Je veux exporter les données de la table html pour exceller en utilisant un script java ou jquery, comatibale avec tous les navigateurs. J'utilise le script ci-dessous

<script type="text/javascript">
function ExportToExcel(mytblId){
       var htmltable= document.getElementById('my-table-id');
       var html = htmltable.outerHTML;
       window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
    }
</script>

Ce script fonctionne très bien dans Mozilla Firefox , il apparaît avec une boîte de dialogue d'Excel et demande des options d'ouverture ou d'enregistrement. Mais lorsque j'ai testé le même script dans le navigateur Chrome, il ne fonctionne pas comme prévu, lorsque vous cliquez sur le bouton, il n'y a pas de fenêtre contextuelle pour Excel. Les données sont téléchargées dans un fichier avec "type de fichier: fichier", sans extension comme .xls. Il n'y a pas d'erreurs dans la console Chrome.

Exemple Jsfiddle:

http://jsfiddle.net/insin/cmewv/

Cela fonctionne bien dans Mozilla mais pas dans Chrome.

Cas de test du navigateur Chrome:

Première image: je clique sur le bouton Exporter vers Excel

et résultat:

Résultat

Answer 2

Le cas de test est pour chrome

Sukane

Answer 3

1

Le cas de test ci-dessus échoue si vous utilisez un produit open source LibreOffice et un navigateur Chrome. Mais si MS Office est installé, le code fonctionnera correctement.

Sukane

Answer 4

Le script d'exportation Excel fonctionne sur IE7 +, Firefox et Chrome.

function fnExcelReport()
{
    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange; var j=0;
    tab = document.getElementById('headerTable'); // id of table

    for(j = 0 ; j < tab.rows.length ; j++) 
    {     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
        //tab_text=tab_text+"</tr>";
    }

    tab_text=tab_text+"</table>";
    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
    {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
    }  
    else                 //other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}

Créez simplement une iframe vierge:

<iframe id="txtArea1" style="display:none"></iframe>

Appelez cette fonction sur:

<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>

Answer 5

1

sinon pour ce qu'est cette ligne ?? var txt = document.getElementById ('txtArea1'). contentWindow;

sampopes

Answer 6

3

Dans Chrome, lorsque vous cliquez sur le bouton de téléchargement, rien ne se passe du tout lorsque vous utilisez cette méthode. Aucune erreur de console ou quoi que ce soit.

Kyle Bachan

Answer 7

1

Parfait +1 !!! Cela fonctionne dans IE 11, Chrome 35, Firefox 29, Opera 17 Mais ne fonctionne pas dans safari 5.1.7 !!! :(

Suganth G

Answer 8

9

comment puis-je changer le nom Randome. Je veux définir un nom spécifique.

osman Rahimi

Answer 9

21

"Le format de fichier et l'extension de download.xls ne correspondent pas" Cela ne fait pas plaisir au gestionnaire: / Des idées?

Tom Stickel

Answer 10

34

Le plugin Datatable résout le mieux l'objectif et nous permet d'exporter les données de la table HTML dans Excel, PDF, TEXT. facilement configurable.

Veuillez trouver l'exemple complet dans le lien de référence datable ci-dessous:

https://datatables.net/extensions/buttons/examples/html5/simple.html

(capture d'écran du site de référence datable)

Aditya
la source

4

OMG! C'est un plugin génial! ... et a plusieurs plugins intégrés !! Exporter, trier, réorganiser, aperçu avant impression, etc ... J'ai résolu toutes mes données montrant les besoins en un seul coup!

Gusstavv Gil

Puis-je appliquer des styles à mon Excel en utilisant ce plugin?

Shruthi Sathyanarayana

@Addy, c'est une solution DataTables uniquement, non?

Karl

1

Le bouton d'exportation supprimera chaque liste déroulante du nombre de lignes de page, si vous souhaitez conserver les deux éléments? veuillez vérifier datatables.net/extensions/buttons/examples/initialisation/... pour le résoudre.

Kaushik Das

Le plugin est génial. Existe-t-il un moyen d'extraire simplement le code pertinent pour exporter les données et les mettre en évidence ici? Ce serait d'une grande aide. Merci d'avance

Murtuza Husain

Answer 11

4

OMG! C'est un plugin génial! ... et a plusieurs plugins intégrés !! Exporter, trier, réorganiser, aperçu avant impression, etc ... J'ai résolu toutes mes données montrant les besoins en un seul coup!

Gusstavv Gil

Answer 12

Puis-je appliquer des styles à mon Excel en utilisant ce plugin?

Shruthi Sathyanarayana

Answer 13

@Addy, c'est une solution DataTables uniquement, non?

Karl

Answer 14

1

Le bouton d'exportation supprimera chaque liste déroulante du nombre de lignes de page, si vous souhaitez conserver les deux éléments? veuillez vérifier datatables.net/extensions/buttons/examples/initialisation/... pour le résoudre.

Kaushik Das

Answer 15

Le plugin est génial. Existe-t-il un moyen d'extraire simplement le code pertinent pour exporter les données et les mettre en évidence ici? Ce serait d'une grande aide. Merci d'avance

Murtuza Husain

Answer 16

Cela pourrait aider

function exportToExcel(){
var htmls = "";
            var uri = 'data:application/vnd.ms-excel;base64,';
            var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'; 
            var base64 = function(s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            };

            var format = function(s, c) {
                return s.replace(/{(\w+)}/g, function(m, p) {
                    return c[p];
                })
            };

            htmls = "YOUR HTML AS TABLE"

            var ctx = {
                worksheet : 'Worksheet',
                table : htmls
            }


            var link = document.createElement("a");
            link.download = "export.xls";
            link.href = uri + base64(format(template, ctx));
            link.click();
}

Answer 17

1

et si je ne veux exporter que les colonnes visibles dans le tableau html ??

Nouman Bhatti

Answer 18

Salut, je ne peux pas faire d'opérations EXCEL avec la feuille, par exemple: Autosum. Est-ce à cause du format de données de cette feuille EXCEL ou de tout autre problème .. J'ai besoin d'aide pour effectuer certaines opérations.

Nanda Kishore Allu le

Answer 19

9

http://wsnippets.com/export-html-table-data-excel-sheet-using-jquery/ essayez ce lien, cela pourrait résoudre votre problème

entrez la description de l'image ici

Uchit Shrestha
la source

Uchit, merci pour votre réponse.Mais j'ai déjà essayé cet exemple.Comme je l'ai mentionné, je doute qu'il fonctionne bien dans Mozilla mais pas dans Chorme.Peut-on essayer cet exemple dans le navigateur Chrome?

Sukane

5

J'ai essayé votre code sur jsfiddle et j'obtiens un résultat positif. Cela fonctionne bien même en chorme. Vous pouvez voir dans l'image ci-dessus que le téléchargement a été réussi

Uchit Shrestha

1

Uchit, merci Oui, le code fonctionne. Le problème est que j'utilisais Libre Office, donc dans Chrome, l'exportation vers Excel ne fonctionnait pas correctement (capture d'écran de référence en m question). Mais dans MS Office, cela fonctionne, comme vous l'avez mentionné. Merci d'avoir fourni un code jQuery pour cela.

Sukane

Cette fonction n'exporte pas les valeurs des champs ayant des listes déroulantes et des horodatages

SNT93

cela ne fonctionne pas avec plusieurs tables html, mais avec une seule table. Comment puis-je faire cela avec des tables multiples ??????

ignacio chiazzo

Answer 20

Uchit, merci pour votre réponse.Mais j'ai déjà essayé cet exemple.Comme je l'ai mentionné, je doute qu'il fonctionne bien dans Mozilla mais pas dans Chorme.Peut-on essayer cet exemple dans le navigateur Chrome?

Sukane

Answer 21

5

J'ai essayé votre code sur jsfiddle et j'obtiens un résultat positif. Cela fonctionne bien même en chorme. Vous pouvez voir dans l'image ci-dessus que le téléchargement a été réussi

Uchit Shrestha

Answer 22

1

Uchit, merci Oui, le code fonctionne. Le problème est que j'utilisais Libre Office, donc dans Chrome, l'exportation vers Excel ne fonctionnait pas correctement (capture d'écran de référence en m question). Mais dans MS Office, cela fonctionne, comme vous l'avez mentionné. Merci d'avoir fourni un code jQuery pour cela.

Sukane

Answer 23

Cette fonction n'exporte pas les valeurs des champs ayant des listes déroulantes et des horodatages

SNT93

Answer 24

cela ne fonctionne pas avec plusieurs tables html, mais avec une seule table. Comment puis-je faire cela avec des tables multiples ??????

ignacio chiazzo

Answer 25

Au lieu d'utiliser, window.openvous pouvez utiliser un lien avec l' onclickévénement.
Et vous pouvez mettre la table html dans l'URI et définir le nom du fichier à télécharger.

Démo en direct:

function exportF(elem) {
  var table = document.getElementById("table");
  var html = table.outerHTML;
  var url = 'data:application/vnd.ms-excel,' + escape(html); // Set your html table into url 
  elem.setAttribute("href", url);
  elem.setAttribute("download", "export.xls"); // Choose the file name
  return false;
}

<table id="table" border="1">
  <tr>
    <td>
      Foo
    </td>
    <td>
      Bar
    </td>
  </tr>
</table>

<a id="downloadLink" onclick="exportF(this)">Export to excel</a>

Développer l'extrait

Answer 26

Comment puis-je définir la bordure du tableau, la largeur du td, etc. en fonction?

Zeffry Reynando le

Answer 27

TableExport - La bibliothèque simple et facile à mettre en œuvre pour exporter des tableaux HTML vers des fichiers xlsx, xls, csv et txt.

Pour utiliser cette bibliothèque, appelez simplement le TableExportconstructeur:

new TableExport(document.getElementsByTagName("table"));

// OR simply

TableExport(document.getElementsByTagName("table"));

// OR using jQuery

$("table").tableExport();

Des propriétés supplémentaires peuvent être transmises pour personnaliser l'apparence de vos tables, boutons et données exportées. Voir ici plus d'infos

Answer 28

Prend-il en charge les PhantomJs? Comment signaler des bugs?

golimar le

Answer 29

Ma fusion de ces exemples:

https://www.codexworld.com/export-html-table-data-to-excel-using-javascript https://bl.ocks.org/Flyer53/1de5a78de9c89850999c

function exportTableToExcel(tableId, filename) {
    let dataType = 'application/vnd.ms-excel';
    let extension = '.xls';

    let base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s)))
    };

    let template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';
    let render = function(template, content) {
        return template.replace(/{(\w+)}/g, function(m, p) { return content[p]; });
    };

    let tableElement = document.getElementById(tableId);

    let tableExcel = render(template, {
        worksheet: filename,
        table: tableElement.innerHTML
    });

    filename = filename + extension;

    if (navigator.msSaveOrOpenBlob)
    {
        let blob = new Blob(
            [ '\ufeff', tableExcel ],
            { type: dataType }
        );

        navigator.msSaveOrOpenBlob(blob, filename);
    } else {
        let downloadLink = document.createElement("a");

        document.body.appendChild(downloadLink);

        downloadLink.href = 'data:' + dataType + ';base64,' + base64(tableExcel);

        downloadLink.download = filename;

        downloadLink.click();
    }
}

Answer 30

1

Uncaught ReferenceError: base64 n'est pas définie

Pedro Joaquín

Answer 31

Vous pouvez utiliser une bibliothèque comme ShieldUI pour ce faire.

Il prend en charge l'exportation vers les formats Excel largement utilisés XML et XLSX.

Plus de détails ici: http://demos.shieldui.com/web/grid-general/export-to-excel

Answer 32

En ce qui concerne la réponse des sampopes du 6 juin 14 à 11:59:

J'ai inséré un style css avec une taille de police de 20px pour afficher les données Excel plus grandes. Dans le code de sampopes, les <tr>balises de tête sont manquantes, donc je commence par afficher le titre et que les autres lignes de tableaux dans une boucle.

function fnExcelReport()
{
    var tab_text = '<table border="1px" style="font-size:20px" ">';
    var textRange; 
    var j = 0;
    var tab = document.getElementById('DataTableId'); // id of table
    var lines = tab.rows.length;

    // the first headline of the table
    if (lines > 0) {
        tab_text = tab_text + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>';
    }

    // table data lines, loop starting from 1
    for (j = 1 ; j < lines; j++) {     
        tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</tr>";
    }

    tab_text = tab_text + "</table>";
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");             //remove if u want links in your table
    tab_text = tab_text.replace(/<img[^>]*>/gi,"");                 // remove if u want images in your table
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");    // reomves input params
    // console.log(tab_text); // aktivate so see the result (press F12 in browser)

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

     // if Internet Explorer
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa = txtArea1.document.execCommand("SaveAs", true, "DataTableExport.xls");
    }  
    else // other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}

Answer 33

Pouvez-vous s'il vous plaît me dire comment supprimer une colonne spécifique de l'exportation vers Excel. Par exemple, je veux éviter tab.rows[j].cells[13] , votre aide est vraiment appréciée

Disera

Answer 34

Très belle réponse, pour un tableau très simple je garderais juste la dernière ligne: window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));l'encadrement est très important.

Pere Pages

Answer 35

 function exportToExcel() {
        var tab_text = "<tr bgcolor='#87AFC6'>";
        var textRange; var j = 0, rows = '';
        tab = document.getElementById('student-detail');
        tab_text = tab_text + tab.rows[0].innerHTML + "</tr>";
        var tableData = $('#student-detail').DataTable().rows().data();
        for (var i = 0; i < tableData.length; i++) {
            rows += '<tr>'
                + '<td>' + tableData[i].value1 + '</td>'
                + '<td>' + tableData[i].value2 + '</td>'
                + '<td>' + tableData[i].value3 + '</td>'
                + '<td>' + tableData[i].value4 + '</td>'
                + '<td>' + tableData[i].value5 + '</td>'
                + '<td>' + tableData[i].value6 + '</td>'
                + '<td>' + tableData[i].value7 + '</td>'
                + '<td>' +  tableData[i].value8 + '</td>'
                + '<td>' + tableData[i].value9 + '</td>'
                + '<td>' + tableData[i].value10 + '</td>'
                + '</tr>';
        }
        tab_text += rows;
        var data_type = 'data:application/vnd.ms-excel;base64,',
            template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table border="2px">{table}</table></body></html>',
            base64 = function (s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            },
            format = function (s, c) {
                return s.replace(/{(\w+)}/g, function (m, p) {
                    return c[p];
                })
            }

        var ctx = {
            worksheet: "Sheet 1" || 'Worksheet',
            table: tab_text
        }
        document.getElementById("dlink").href = data_type + base64(format(template, ctx));
        document.getElementById("dlink").download = "StudentDetails.xls";
        document.getElementById("dlink").traget = "_blank";
        document.getElementById("dlink").click();
    }

Développer l'extrait

Ici, les valeurs 1 à 10 sont les noms de colonnes que vous obtenez

Answer 36

Vous pouvez utiliser tableToExcel.js pour exporter la table dans un fichier Excel.

Cela fonctionne de la manière suivante:

1). Incluez ce CDN dans votre projet / fichier

<script src="https://cdn.jsdelivr.net/gh/linways/[email protected]/dist/tableToExcel.js"></script>

2). Soit en utilisant JavaScript:

<button id="btnExport" onclick="exportReportToExcel(this)">EXPORT REPORT</button>

function exportReportToExcel() {
  let table = document.getElementsByTagName("table"); // you can use document.getElementById('tableId') as well by providing id to the table tag
  TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
    name: `export.xlsx`, // fileName you could use any name
    sheet: {
      name: 'Sheet 1' // sheetName
    }
  });
}

3). Ou en utilisant Jquery

<button id="btnExport">EXPORT REPORT</button>

$(document).ready(function(){
    $("#btnExport").click(function() {
        let table = document.getElementsByTagName("table");
        TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
           name: `export.xlsx`, // fileName you could use any name
           sheet: {
              name: 'Sheet 1' // sheetName
           }
        });
    });
});

Vous pouvez vous référer à ce lien github pour toute autre information

https://github.com/linways/table-to-excel/tree/master

ou pour référencer l'exemple en direct, visitez le lien suivant

https://codepen.io/rohithb/pen/YdjVbb

J'espère que cela aidera quelqu'un :-)

Answer 37

Ma version de @sampopes répond

function exportToExcel(that, id, hasHeader, removeLinks, removeImages, removeInputParams) {
if (that == null || typeof that === 'undefined') {
    console.log('Sender is required');
    return false;
}

if (!(that instanceof HTMLAnchorElement)) {
    console.log('Sender must be an anchor element');
    return false;
}

if (id == null || typeof id === 'undefined') {
    console.log('Table id is required');
    return false;
}
if (hasHeader == null || typeof hasHeader === 'undefined') {
    hasHeader = true;
}
if (removeLinks == null || typeof removeLinks === 'undefined') {
    removeLinks = true;
}
if (removeImages == null || typeof removeImages === 'undefined') {
    removeImages = false;
}
if (removeInputParams == null || typeof removeInputParams === 'undefined') {
    removeInputParams = true;
}

var tab_text = "<table border='2px'>";
var textRange;

tab = $(id).get(0);

if (tab == null || typeof tab === 'undefined') {
    console.log('Table not found');
    return;
}

var j = 0;

if (hasHeader && tab.rows.length > 0) {
    var row = tab.rows[0];
    tab_text += "<tr bgcolor='#87AFC6'>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[0].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
    j++;
}

for (; j < tab.rows.length; j++) {
    var row = tab.rows[j];
    tab_text += "<tr>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[j].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
}

tab_text = tab_text + "</table>";
if (removeLinks)
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");
if (removeImages)
    tab_text = tab_text.replace(/<img[^>]*>/gi, ""); 
if (removeInputParams)
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
{
    myIframe.document.open("txt/html", "replace");
    myIframe.document.write(tab_text);
    myIframe.document.close();
    myIframe.focus();
    sa = myIframe.document.execCommand("SaveAs", true, document.title + ".xls");
    return true;
}
else {
    //other browser tested on IE 11
    var result = "data:application/vnd.ms-excel," + encodeURIComponent(tab_text);
    that.href = result;
    that.download = document.title + ".xls";
    return true;
}
}

Nécessite un iframe

<iframe id="myIframe" style="opacity: 0; width: 100%; height: 0px;" seamless="seamless"></iframe>

Usage

$("#btnExportToExcel").click(function () {
    exportToExcel(this, '#mytable');
});

L'exportation des données de table html vers Excel à l'aide de JavaScript / JQuery ne fonctionne pas correctement dans le navigateur Chrome

Réponses: