2013-03-05 8 views
12


Ich versuche, HTML-Tabellen in Excel zu konvertieren, habe ich mit einer JavaScript-Funktion versucht, die eine einfache Tabelle in Excel konvertiert, funktioniert es gut. Wenn ich mehrere Tabellen habe, wie kann ich alle Tabellendaten in die Excel-Datei einfügen. Hier ist, was ich versucht habe. Ich habe 2 Tabellen erstellt und Tabellenindex testTable und testTable1 gegeben.JavaScript - HTML-Tabellendaten in Excel exportieren

Wie werde ich diese 2 Tabelle IDs auf die JavaScript-Funktion auf einen Klick auf die Schaltfläche übergeben? Gerade jetzt beim Klicken auf die Schaltfläche wird nur die erste Tabelle in Excel exportiert, da ich nur 'testTable' übergebe. Wie kann ich mehrere Tabellen exportieren, zB: testTable, testTable1 in Excel?

Hier ist das 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> 

Hier ist der HTML-Teil,

<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> 

Bitte lassen Sie mich wissen, wie dies getan werden kann?
Dank

+0

Können Sie nicht Web-Service für dieses Problem verwenden. Es funktioniert auch ohne Postback. – osmanraifgunes

Antwort

9

ich ein anderes Format Methode empfehlen. Die John Resig Micro-Vorlage ist ein sehr gutes und einfaches Werkzeug, um das zu tun, was Sie brauchen. (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; 
    }; 
})(); 

Es ist sehr einfach zu bedienen. Dies ermöglicht nicht nur das Anzeigen von Variablen zwischen HTML, sondern auch das Ausführen von JavaScript-Code

Ihr Template-String benötigt einige Modifikationen, um mit diesem Microtemplate zu arbeiten.

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

müssen schließlich nur alle Tabellen auszuwählen, die in Ihrem Beispiel erscheinen

document.getElementsByTagName("table"); 

Sie sehen können, wie es http://jsfiddle.net/Scipion/P8rpn/1/

+0

Danke eine Tonne Scipion! Ich wollte nur wissen, ob ich diese Funktionalität auf einen Klick auf eine HTML-Schaltfläche tun kann ... Ich habe versucht, mit dieser aber das funktioniert nicht .... Wie funktioniert es auf jsFiddle? Wenn ich dasselbe in HTML implementiere, kann ich die Datei nicht mit einem Klick auf den Button bekommen. Bitte lassen Sie mich wissen, wenn dies möglich ist. – shockwave

+1

versuchen Sie herunter und fügen Sie das Click-Ereignis hinzu.Funktion Download() { tableToExcel (document.getElementsByTagName ("Tabelle"), "eins"); } var btn = document.getElementById ("btn"); btn.addEventListener ("click", download); http://jsfiddle.net/Scipion/P8rpn/3/ – Scipion

+0

Vielen Dank !! Das hat wie ein Zauber funktioniert! :) – shockwave

0

erstellen eine Funktion, und übergeben Sie die tableID es

function passing_id_to_excel(tableID){ 
    var myTableid = 
document.getElementById(tableID) //remaining code } 
+0

Wie werde ich mehrere TableIDs übergeben? – shockwave

0
  1. hinzufügen Checkbox für jede Tabelle funktioniert. Verwenden Sie Javascript, um diejenigen zu verarbeiten, die aktiviert sind.
  2. Wenn Sie nur jede Tabelle konvertieren möchten, können Sie $('table').each(function() { do something }) verwenden.
Verwandte Themen