web-dev-qa-db-ja.com

JavaScriptを使用してHTMLテーブルをExcelにエクスポートする

HTMLテーブルをxls foramtにエクスポートしています。 Libre Officeで開いた場合、エクスポート後に正常に動作しますが、Microsoft Officeで空白の画面が開きます。

jqueryソリューションが必要ないjavascriptソリューションを提供してください。助けてください。

function fnExcelReport() {
    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange;
    var j = 0;
    tab = document.getElementById('table'); // 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);
}
<iframe id="txtArea1" style="display:none"></iframe>

    Call this function on

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

    <table id="table">
  <thead>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </tbody>
    </table>
javascripthtmlexcel
22
Shrinivas Pai

2016-07-12に、MicrosoftはMicrosoft Officeの セキュリティ更新プログラム をプッシュしました。この更新プログラムの効果の1つは、保護モードで開くことができないため、信頼されていないドメインのHTMLファイルがExcelで開かないようにすることでした。

また、デフォルトでは「拒否」ではなく「警告」になっていますが、その内容が公式のXLSファイル形式と一致しない.XLSファイル拡張子を持つファイルをExcelで開けないようにするレジストリ設定もあります。

この変更の前は、HTMLデータをXLS拡張子を持つファイルに保存することが可能でした。Excelはそれを正しく開きます-おそらく 最初に警告を出す ファイルがExcel形式と一致しなかった可能性がありますExtensionHardeningレジストリキーに対するユーザーの値（または関連する構成値）。

Microsoftには、新しい動作に関する ナレッジベースを作成 エントリがあり、回避策がいくつか提案されています。

以前にXLSとしてHTMLファイルをエクスポートすることに依存していたいくつかのWebアプリケーションは、更新の結果としてトラブルに遭遇しました- SalesForce はその一例です。

この質問および同様の質問に対する2016年7月12日以前の回答は、現在無効である可能性があります。

リモートデータからブラウザ上で作成されたファイルがこの保護に違反しないことは注目に値します。信頼されていないリモートソースからダウンロードされたファイルを妨げるだけです。したがって、可能なアプローチの1つは、.XLSラベル付きHTMLファイルをクライアント上でローカルに生成することです。

別の方法は、もちろん、有効なXLSファイルを生成することです。これにより、Excelは保護モードで開きます。

[〜＃〜] update [〜＃〜]：マイクロソフトはこの動作を修正するパッチをリリースしました： https：// support。 Microsoft.com/en-us/kb/3181507

24
S McCrohan

SheetJS はこれに最適のようです。

テーブルをExcelファイルとしてエクスポートするには、このコードを使用します link （SheetJSと共に）

table要素のIDをexport_table_to_Excelに接続するだけです

デモ を参照してください

11
jlynch630

CSV形式が適している場合は、次の例をご覧ください。

  • OK ...私はあなたがそれがあなたに良くないとはっきりと言っているコメントを読んだだけです。コーディングの前に読むことを学ばないのは私の悪いことです。

私の知る限り、ExcelはCSVを処理できます。

function fnExcelReport() {
var i, j;
var csv = "";

var table = document.getElementById("table");

var table_headings = table.children[0].children[0].children;
var table_body_rows = table.children[1].children;

var heading;
var headingsArray = [];
for(i = 0; i < table_headings.length; i++) {
  heading = table_headings[i];
  headingsArray.Push('"' + heading.innerHTML + '"');
}

csv += headingsArray.join(',') + ";\n";

var row;
var columns;
var column;
var columnsArray;
for(i = 0; i < table_body_rows.length; i++) {
  row = table_body_rows[i];
  columns = row.children;
  columnsArray = [];
  for(j = 0; j < columns.length; j++) {
      var column = columns[j];
      columnsArray.Push('"' + column.innerHTML + '"');
  }
  csv += columnsArray.join(',') + ";\n";
}

  download("export.csv",csv);
}

//From: http://stackoverflow.com/a/18197511/2265487
function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}
<iframe id="txtArea1" style="display:none"></iframe>

Call this function on

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

<table id="table">
  <thead>
    <tr>
      <th>Head1</th>
      <th>Head2</th>
      <th>Head3</th>
      <th>Head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
      <td>43</td>
      <td>44</td>
    </tr>
  </tbody>
</table>
7
ElMesa

これをあなたの頭に追加してください：

<meta http-equiv="content-type" content="text/plain; charset=UTF-8"/>

これをjavascriptとして追加します：

<script type="text/javascript">
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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></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>

Jfiddle： http://jsfiddle.net/cmewv/537/

2
Connor Meeks

これを試して

<table id="exportable">
<thead>
      <tr>
          //headers
      </tr>
</thead>
<tbody>
         //rows
</tbody>
</table>

このためのスクリプト

var blob = new Blob([document.getElementById('exportable').innerHTML], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
        });
saveAs(blob, "Report.xls");
2
Tarek Salah uddin Mahmud
<hrml>
  <head>
     <script language="javascript">
      function exportF() {
  //Format your table with form data
  document.getElementById("input").innerHTML = document.getElementById("text").value;
   document.getElementById("input1").innerHTML = document.getElementById("text1").value;
  var table = document.getElementById("table");
  var html = table.outerHTML;

  var url = 'data:application/vnd.C:\\Users\WB-02\desktop\Book1.xlsx,' + escape(html); // Set your html table into url 
  var link = document.getElementById("downloadLink");
  link.setAttribute("href", url);
  link.setAttribute("download", "export.xls"); // Choose the file name
  link.click(); // Download your Excel file   
  return false;
}
    </script>
 </head>
 <body>
<form onsubmit="return exportF()">
  <input id="text" type="text" />
  <input id="text1" type="text" />
  <input type="submit" />
</form>

<table id="table" style="display: none">
  <tr>
    <td id="input">
    <td id="input1">
    </td>
  </tr>
</table>
<a style="display: none" id="downloadLink"></a>
</body>
</html>
1
Anuruddh Mishra