web-dev-qa-db-fra.com

Exporter un tableau HTML dynamique vers Excel en javascript dans le navigateur Firefox

Voulez-vous exporter la table HTML dynamique vers Excel en javascript est-il possible de le faire dans le navigateur Firefox sans utiliser l'objet ActiveX dans le code

javascriptexcelfirefox
19
Siddharth

Voici une fonction pour le faire dans Firefox avec JavaScript, en supposant que l'utilisateur a installé Excel sur sa machine:

var tableToExcel = (function() {
  var uri = '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>{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]; }) }
  return function(table, name) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    window.location.href = uri + base64(format(template, ctx))
  }
})()

jsFiddle live exemple:

37
Jonny Buchanan

Vous pouvez générer dynamiquement le fichier Excel au format SpreadsheetDataXML, ce qui vous permet de personnaliser le tableau, les styles de cellule et le format en syntaxe HTML. 

Pour que cela fonctionne dans IE, vous devez utiliser l'objet Blob, puis appeler la méthode msSaveBlob . Pour FF et Chrome, il vous suffit de modifier les données de href en données: application/vnd.ms-Excel.

function fnExcelReport() {
    var tab_text = '<html xmlns:x="urn:schemas-Microsoft-com:office:Excel">';
    tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';

    tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';

    tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
    tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';

    tab_text = tab_text + "<table border='1px'>";
    tab_text = tab_text + $('#myTable').html();
    tab_text = tab_text + '</table></body></html>';

    var data_type = 'data:application/vnd.ms-Excel';

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

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        if (window.navigator.msSaveBlob) {
            var blob = new Blob([tab_text], {
                type: "application/csv;charset=utf-8;"
            });
            navigator.msSaveBlob(blob, 'Test file.xls');
        }
    } else {
        $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text));
        $('#test').attr('download', 'Test file.xls');
    }
}

Exemple de travail: http://jsfiddle.net/h42y4ke2/21/ Tutoriel YT: https://www.youtube.com/watch?v=gx_yGY6NHkc

10
Tan Piyapat

Il existe une extension table2clipboard pour Firefox. Vous pouvez également générer manuellement une sortie csv à partir de l'arborescence DOM et laisser l'utilisateur l'enregistrer en tant que fichier csv. Excel peut importer à partir de CSV.

0
Michał Šrajer

Autant que je sache, il n’existe pas de bibliothèque permettant de créer un vrai fichier Excel en JavaScript, mais vous pouvez essayer d’exporter le tableau au format HTML dans un fichier avec une extension .xls.

0
Thomas