2013-03-05 7 views
12


HTMLテーブルをExcelに変換しようとしています。単純なテーブルをExcelに変換するJavaScript関数を試してみましたが、正常に動作しています。複数の表がある場合、どのようにしてすべての表データをExcelファイルに追加できますか?ここで私が試したことがあります。私は2つのテーブルを作成し、テーブルインデックスtestTabletestTable1を与えました。JavaScript - HTMLテーブルデータをExcelに書き出す

ボタンをクリックするとJavaScriptの機能にどのように2つのテーブルIDを渡しますか?今すぐボタンをクリックするだけで、最初のテーブルがExcelにエクスポートされ、私は'testTable'を渡します。どのように私は複数のテーブルをエクスポートすることができます:testTabletestTable1 Excelに?

ここでは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> 

ここ

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

は私に知らせてください、HTMLの一部だ、これはどのように行うことができますか?
おかげ

+0

をあなたはこの問題のためにWebサービスを使用することはできません。ポストバックなしでも動作します。 – osmanraifgunes

答えて

9

をTABLEIDを渡します。 John Resigマイクロテンプレートは、必要な作業を行うための非常に優れた簡単なツールです。 (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; 
    }; 
})(); 

使い方はとても簡単です。これにより、HTML間で変数を表示するだけでなく、JavaScriptコードを実行することができます

このテンプレートは、このmicrotemplateで動作するようにいくつかの変更が必要です。

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

は最終的にだけでは、各テーブルのチェックボックスを追加します。http://jsfiddle.net/Scipion/P8rpn/1/

+0

ありがとう、トンScipion!私はちょうど私がhtmlボタンのクリックでこの機能を行うことができるかどうかを知りたがっています...これで試しました これは動作していません....どのようにjsFiddleで動作していますか?私はhtmlで同じを実装する場合は、ボタンのクリックでファイルを取得することはできません。可能であれば、教えてください。 – shockwave

+1

try をダウンロードし、clickイベントを追加します。関数のダウンロード(){ tableToExcel(document.getElementsByTagName( "table")、 "one"); } var btn = document.getElementById( "btn"); btn.addEventListener( "click"、ダウンロード); http://jsfiddle.net/Scipion/P8rpn/3/ – Scipion

+0

ありがとう!これは魅力的に機能しました! :) – shockwave

0

は、関数を作成し、私は別のフォーマット方法をお勧めします、それに

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

複数のtableIDをどのように渡しますか? – shockwave

0
  1. どのように動作するかあなたが見ることができる

    document.getElementsByTagName("table"); 
    

    あなたの例に表示されるすべてのテーブルを選択する必要があります。チェックされたものを処理するにはjavascriptを使用してください。

  2. すべてのテーブルを変換するだけの場合は、$('table').each(function() { do something })を使用できます。
関連する問題