关于javascript：如何将HTML表格导出为.xlsx文件


How to export an HTML table as a .xlsx file

我对将HTML表格导出为xlsx文件有疑问。我做了一些工作，现在可以将其导出为xls，但是我需要将其导出为xlsx。

这是我的jsFiddle：https://jsfiddle.net/272406sv/1/

这是我的HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  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();
  }
相关讨论

clarketm(me)的TableExport是将html表导出到xlsx，xls，csv或txt的一种出色的客户端工具。它是一个简单，易于实现的功能齐全的库，具有一堆可配置的属性和方法。

安装

1
$ npm install tableexport

用法

1
2
3
4
5
TableExport(document.getElementsByTagName("table"));

// OR using jQuery

$("table").tableExport();

文献资料

示例应用程序可帮助您入门

  • TableExport RequireJS
  • 表出口Flask
  • TableExport Webpack 1
  • TableExport Angular 4 Webpack 2

Check out the compendious docs or just head over to TableExport on Github for a full list of features.

相关讨论

您可以使用此插件将表导出到.xlsx

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

相关讨论

看看tableExport.jquery.plugin或tableexport.jquery.plugin

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  HTML table Export  
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
    <script type="text/javascript" src="../lib/js-xlsx/xlsx.core.min.js">
    <script type="text/javascript" src="../lib/FileSaver/FileSaver.min.js">
    <script type="text/javascript" src="../lib/html2canvas/html2canvas.min.js">
    <script type="text/javascript" src="../tableExport.js">
    <script type="text/javaScript">        
        var sFileName = 'ngophi';
        function ExportXLSX(){
            $('#Event').tableExport({fileName: sFileName,
                        type: 'xlsx'
                       });
        }
   
 <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>  
DownloadXLSX
<br/>
<br/>

    <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>http://www.jquery2dotnet.com/
            </td>
        </tr>
    </table>

</body>
</html>
相关讨论

如果不返回服务器，将无法将其导出为XLSX。 XLSX文件是压缩在一起的XML文件的集合。这意味着您确实需要创建多个文件。在客户端使用JS不可能做到这一点。

相反，您应该创建一个函数来从HTML表中检索数据并将其发送到服务器。然后，服务器可以为您创建XLSX文件(有很多可用的库！)，然后将其发送回客户端进行下载。

如果您希望拥有庞大的数据集，则应在服务器上以异步过程完成XLSX的创建，在此过程中，您会在完成时通知用户(而不是让用户等待文件的创建) )。

让我们知道您在服务器上使用哪种语言，我们将向您推荐一些优质的库。

相关讨论