如何将 HTML 表格导出为 .xlsx 文件答案

【问题标题】：How to export an HTML table as a .xlsx file如何将 HTML 表格导出为 .xlsx 文件
【发布时间】：2016-09-26 16:37:24
【问题描述】：

我有一个关于将 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>

【问题讨论】：

您可以查看下面的 JSFiddle，它将 html 表格转换为 xlsx、csv 和 txt 格式以及自定义文件名。链接：JSFiddle

标签： javascript excel html-table xls xlsx

【解决方案1】：

一个很棒的客户端工具，用于将html 表导出到xlsx、xls、csv 或txt 是TableExport by clarketm（我）。它是一个简单、易于实现、功能齐全的库，具有大量可配置的属性和方法。

安装

$ npm install tableexport

用法

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

// OR using jQuery

$("table").tableExport();

Documentation

帮助您入门的示例应用

查看简明的 docs 或直接前往 Github 上的 TableExport 获取完整的功能列表。

【讨论】：

不幸的是，它似乎无法处理格式化（即样式化、CSS 等）数据。导出是一个普通的、未格式化的 XLSX 文件。另见：github.com/clarketm/TableExport/issues/125
@GridTrekkor – TableExport 从未声称能够将 CSS 样式映射到 XLSX 表格格式。它被明确构建用于以稳健、受控的方式解析复杂的 HTML 表格数据，并允许在客户端将其导出为各种文件格式（例如 TXT、CSV、XLS、XLSX）。
如何在 dot net MVC 应用程序中使用它？
@TravisClarke 您的插件是否能够从继承的 json（称为 API）导出到 excel？是 xlsx 还是 xls 还是 csv？

【解决方案2】：

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

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

【讨论】：

这是最正确的答案。但在 Safari、Mac OS 和 IOS 上存在问题
有人知道 ruby gem 在文件上做同样的事情吗？也就是说，下载一个包含表格数据的 htnl 文件并将其转换为 xlsx（不是 xls）？

【解决方案3】：

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

【讨论】：

这个插件简单又好用。在 xlsx 上运行良好。

【解决方案4】：

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

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

如果您希望拥有庞大的数据集，则应在服务器上创建 XLSX 作为异步进程，在完成时通知用户（而不是让用户等待创建文件）。

让我们知道您在服务器上使用的语言，我们将能够向您推荐一些好的库。

【讨论】：

感谢您的帮助。我做了一些研究，你是对的。我在前端使用 angularJS，在后端使用 nodejs。
那就看看github.com/SheetJS/js-xlsx吧。这可能是在 Node 中使用 XLSX 最流行的库
@ErdenizKorkmaz – 从历史上讲......这个"would be" 正确。对于所有现代浏览器，甚至许多旧版浏览器，这很容易处理，尽管我不建议将它用于大型数据集（由于性能原因）。查看我写的库：clarketm/TableExport;它在后台利用 SheetJS/js-xlsx 来处理解析。