web-dev-qa-db-fra.com

JavaScript - exporter les données d'un tableau HTML vers Excel


J'essaie de convertir des tableaux HTML en Excel, j'ai essayé avec une fonction JavaScript qui convertit un tableau simple en Excel, cela fonctionne bien. Si j'ai plusieurs tables, comment puis-je ajouter toutes les données de la table dans le fichier Excel? voici ce que j'ai essayé. J'ai créé 2 tables et donné l'index de table testTable et testTable1.

Comment vais-je passer ces 2 identifiants de table à la fonction JavaScript en cliquant sur le bouton? pour le moment, en cliquant sur le bouton, seule la première table est exportée vers Excel car je ne passe que 'testTable'. Comment vais-je pouvoir exporter plusieurs tables, par exemple: testTable, testTable1 dans Excel?

Voici le JavaScript:

<script>

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))
}
})()

</script>

Voici la partie HTML, 

<table id="testTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>ACP</th>
            <th>OEMCP</th>
            <th>Unix<br>
                NT 3.1</th>
            <th>Unix<br>
                NT 3.51</th>
            <th>Unix<br>
                95</th>
        </tr>
    </thead>
</table>
<table id="testTable1">
    <thead>
        <tr>
            <th>Name</th>
            <th>ACP</th>
            <th>OEMCP</th>
            <th>Windows<br>
                NT 3.1</th>
            <th>Windows<br>
                NT 3.51</th>
            <th>Windows<br>
                95</th>
        </tr>
    </thead>
</table>

S'il vous plaît laissez-moi savoir, comment cela peut être fait?
Merci 

javascripthtmlhtml5excelexport-to-excel
12
shockwave

Je recommande une autre méthode de formatage. Le micro-gabarit John Resig est un très bon outil pour faire ce dont vous avez besoin. ( ejohn microtemplating )

(function(){
  var cache = {};

  this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

      // Generate a reusable function that will serve as a template
      // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.Push.apply(p,arguments);};" +

        // Introduce the data as local variables using with(){}
        "with(obj){p.Push('" +

        // Convert the template into pure JavaScript
        str.replace(/[\r\t\n]/g, " ")
              .split("{{").join("\t")
              .replace(/((^|}})[^\t]*)'/g, "$1\r")
              .replace(/\t=(.*?)}}/g, "',$1,'")
              .split("\t").join("');")
              .split("}}").join("p.Push('")
              .split("\r").join("\\'")
              + "');}return p.join('');");

    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };
})();

C'est très simple à utiliser. Cela permet non seulement d'afficher les variables entre HTML mais également d'exécuter du code JavaScript

Votre chaîne de modèle nécessite quelques modifications pour fonctionner avec ce microtemplate.

{{for(var i=0; i<tables.length;i++){ }}
    <table>
        {{=tables[i]}}
    </table>
{{ } }}

enfin seulement besoin de sélectionner toutes les tables qui apparaissent dans votre exemple

document.getElementsByTagName("table");

vous pouvez voir comment cela fonctionne http://jsfiddle.net/Scipion/P8rpn/1/

9
Scipion

créer une fonction et lui passer la tableID

 function passing_id_to_Excel(tableID){ 
  var myTableid =
 document.getElementById(tableID) //remaining code }
0
divyabharathi
  1. Ajouter une case à cocher pour chaque table. Utilisez javascript pour traiter ceux qui sont cochés.
  2. Si vous souhaitez simplement convertir chaque table, vous pouvez utiliser $('table').each(function() { do something }).
0
gongzhitaao