logo标签列表

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

javascriptexcelhtml-tablexlsxlsx
15
我有一个关于将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 - foodiepanda
5个回答
17

一个非常好的客户端工具，可以将 html 表格导出为 xlsx, xls, csv, 或 txt 格式，它就是由 clarketm (即我自己) 开发的 TableExport 库。它是一个简单易用、功能齐全的库，有很多可配置的属性和方法。

安装

$ npm install tableexport

使用方法

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

// OR using jQuery

$("table").tableExport();

文档

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

请查看详尽的文档或直接前往Github上的TableExport获得完整功能列表。

2
很遗憾，它似乎不能处理格式化的（例如样式、CSS等）数据。导出的是一个简单的未格式化的XLSX文件。另请参见：https://github.com/clarketm/TableExport/issues/125 - Grid Trekkor
1
@GridTrekkor - TableExport从来没有声称能够将CSS样式映射到XLSX表格格式。它是专门构建的，以强大、可控的方式解析复杂的HTML表格数据，并允许将其导出到各种文件格式（例如TXT、CSV、XLS、XLSX），全部在客户端完成。 - Travis Clarke
如何在dot net MVC应用程序中使用它？ - user2514925
@TravisClarke，你的插件能否从继承的JSON（一个名为API的接口）导出到Excel？可以是xlsx、xls或csv格式吗？ - mastersuse
1
这个更新/维护了吗？ - S. Dre
7
这是最正确的答案。但在Safari、Mac OS和IOS上存在问题。 - Eslam Sameh Ahmed
有人知道一个Ruby宝石可以在文件上执行相同的操作吗？也就是说，将下载的包含表格数据的htnl文件转换为xlsx（而不是xls）？ - codenoob
4
请看 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 上运行良好。 - Phil
2

如果不返回服务器，您将无法将其导出为XLSX格式。 XLSX文件是一组XML文件，压缩在一起的文件。这意味着您需要创建多个文件。使用JS客户端无法实现此操作。

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

如果您预计拥有大型数据集，则应在服务器上以异步进程执行XLSX创建，当完成时通知用户（而不是让用户等待文件被创建）。

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

谢谢您的帮助。我做了一些研究，您是正确的。我在前端使用AngularJS，在后端使用Node.js。 - Erdeniz Korkmaz
然后看一下 https://github.com/SheetJS/js-xlsx。这可能是在Node中处理XLSX最流行的库。 - Adrien
4
从历史上来看，这个说法是正确的。对于现代浏览器，甚至许多旧版浏览器，处理这个问题非常容易，尽管出于性能原因，我不建议在大量数据集上使用它。请查看我编写的库：clarketm/TableExport；它在后台使用SheetJS/js-xlsx来处理解析。 - Travis Clarke
请解释一下这个链接的内容：https://datatables.net/extensions/buttons/examples/initialisation/export - Nilaksha Perera
2
我已经找到了一个解决方案，可以在客户端使用JavaScript和来自以下URL的库进行操作：https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js。这是一个代码示例。
function ExportSkillsToExcel(type, fn, dl)
{
   var elt = document.getElementById('skillsTable');
   var wb = XLSX.utils.table_to_book(elt, { sheet: "skills" });
   return dl ?
     XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }):
     XLSX.writeFile(wb, fn || ('Skills.' + (type || 'xlsx')));
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接