web-dev-qa-db-ja.com

HTMLテーブルを.xlsxファイルとしてエクスポートする方法

HTMLテーブルをxlsxファイルとしてエクスポートすることについて質問があります。私はいくつかの作業を行い、xlsとしてエクスポートできますが、xlsxとしてエクスポートする必要があります。

こちらが私のjsFiddleです：https://jsfiddle.net/272406sv/1/

これが私のHTMLです：

<table id="toExcel" class="uitable">
  <thead>
    <tr>
      <th>Kampanya Basligi</th>
      <th>Kampanya Türü</th>
      <th>Kampanya Baslangiç</th>
      <th>Kampanya Bitis</th>
      <th style="text-align: center">Aksiyonlar</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="Item in campaign.campaignList">
      <td> Item.CampaignTitle </td>
      <td> Item.CampaignHotelType </td>
      <td> Item.CampaignHotelCheckInDate) </td>
      <td>Item.CampaignHotelCheckOutDate</td>
      <td style="text-align: center">
        <button> Some Action </button>
      </td>
    </tr>
  </tbody>
</table>

<button onclick="exceller()">Excel</button>

ここに私のJavaScriptコードがあります：

<script>
  function exceller() {
    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];
        })
      }
    var toExcel = document.getElementById("toExcel").innerHTML;
    var ctx = {
      worksheet: name || '',
      table: toExcel
    };
    var link = document.createElement("a");
    link.download = "export.xls";
    link.href = uri + base64(format(template, ctx))
    link.click();
  }
</script>
javascriptexcelhtml-tablexlsxlsx
6
Erdeniz Korkmaz

サーバーに戻らずにXLSXとしてエクスポートすることはできません。 XLSXファイルは、圧縮されたXMLファイルのコレクションです。これは、複数のファイルを作成する必要があることを意味します。これは、クライアントサイドのJSでは不可能です。

代わりに、HTMLテーブルからデータを取得する関数を作成し、サーバーに送信する必要があります。その後、サーバーはXLSXファイルを作成し（そのためのライブラリがたくさんあります！）、ダウンロードのためにクライアントに送り返します。

巨大なデータセットが必要な場合、サーバーでのXLSXの作成は非同期プロセスとして実行する必要があります。非同期プロセスでは、ファイルの作成をユーザーに待機させるのではなく、完了時にユーザーに通知します。

サーバーで使用している言語をお知らせください。優れたライブラリをお勧めします。

4
Adrien

htmlテーブルをxlsx、xls、csv、またはtxtにエクスポートするためのgreatクライアント側ツールは TableExport by clarketm （me）。シンプルで実装しやすいフル機能のライブラリであり、構成可能なプロパティとメソッドが多数あります。

インストール

$ npm install tableexport

使用法

TableExport(document.getElementsByTagName("table"));

// OR using jQuery

$("table").tableExport();

ドキュメント

始めるためのサンプルアプリ

機能の完全なリストについては、Githubの優れた docs または TableExport をご覧ください。

8
Travis Clarke

このプラグインを使用して、テーブルを.xlsxにエクスポートできます

http://sheetjs.com/demos/table.html

2
L..

tableExport.jquery.plugin または tableexport.jquery.plugin をご覧ください

コード例

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML table Export</title>  
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="../lib/js-xlsx/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../lib/FileSaver/FileSaver.min.js"></script> 
    <script type="text/javascript" src="../lib/html2canvas/html2canvas.min.js"></script>
    <script type="text/javascript" src="../tableExport.js"></script>
    <script type="text/javaScript">         
        var sFileName = 'ngophi';
        function ExportXLSX(){
            $('#Event').tableExport({fileName: sFileName,
                        type: 'xlsx'
                       });
        }
    </script>
 <style type="text/css">
     body {
        font-size: 12pt;
        font-family: Calibri;
        padding : 10px;
    }
    table {
        border: 1px solid black;
    }
    th {
        border: 1px solid black;
        padding: 5px;
        background-color:grey;
        color: white;
    }
    td {
        border: 1px solid black;
        padding: 5px;
    }
    input {
        font-size: 12pt;
        font-family: Calibri;
    }
 </style>
</head>
<body>  
<a href="#" onClick="ExportXLSX();">DownloadXLSX</a> 
<br/>
<br/>
<div id="Event">
    <table>
        <tr>
            <th>Column One</th>
            <th>Column Two</th>
            <th>Column Three</th>
        </tr>
        <tr>
            <td>row1 Col1</td>
            <td>row1 Col2</td>
            <td>row1 Col3</td>
        </tr>
        <tr>
            <td>row2 Col1</td>
            <td>row2 Col2</td>
            <td>row2 Col3</td>
        </tr>
        <tr>
            <td>row3 Col1</td>
            <td>row3 Col2</td>
            <td><a href="http://www.jquery2dotnet.com/">http://www.jquery2dotnet.com/</a>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
1
Mr.Ngo