使用 sheets.js 插件将 HTML table 转换为纯 JavaScript 中的 Excel 文件

Question

我在 Stack Overflow 上找不到针对我的特定问题的现有 question/answers，所以我发布了这个。我有一个用 HTML 和 jQuery/JavaScript 编写的应用程序。我需要使用 jsxlsx (sheetsjs) 插件将 HTML table 导出到 Excel sheet 中。我尝试复制他们的示例以将 HTML table 转换为 Excel 但程序出错了。这是我目前拥有的：

我的 HTML 代码位于名为 books.cfm 的 coldfusion 页面中。我的 JavaScript 在一个名为 Utils.js 的文件中。它们是：

function s2ab(s) { 
  var buf = new ArrayBuffer(s.length); 
  var view = new Uint8Array(buf); 
  for (var i=0; i<s.length; i++) 
    view[i] = s.charCodeAt(i) & 0xFF; 
    return buf; 
}
 
function convertToExcel(event){
  event.preventDefault();
  console.log("button clicked");
  var wb = XLSX.utils.table_to_book( $("#exceltable"), {sheet:"Exported 
    table"} );
  saveAs(new Blob([s2ab(wb)],{type:"application/octet-stream"}), 
   'test.xlsx');
}

<html>
<head>
  <script src="libs/jquery.min.js"></script>
  <script src="libs/sheets/xlsx.full.min.js"></script>
  <script src="libs/FileSaver/FileSaver.min.js"></script>
  <script src="scripts/Utils.js"></script>
</head>
<body>
  <table id="myTable">
    <tr>
      <td>ID</td>
      <td>Name</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Johnny</td>
    </tr>
  </table>
 <button id="myBtn" onclick="convertToExcel(event)">Export</button>
</body>
</html>

当我运行上述代码并点击按钮转换为Excel时，出现以下错误：

**Uncaught TypeError: e.getElementsByTagName is not a function
at GC (xlsx.full.min.js:20)
at Object.jC [as table_to_book] (xlsx.full.min.js:20)
at exportErrsToExcel (Util.js:1227)
at HTMLButtonElement.onclick (books.cfm:18)**

注意：我从 this site.

得到了上面的 JavaScript 代码

Answer 1

SheetJS 工作代码的新答案：

<script type="text/javascript" src="//unpkg.com/xlsx/dist/shim.min.js"></script>
<script type="text/javascript" src="//unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

<script type="text/javascript" src="//unpkg.com/blob.js@1.0.1/Blob.js"></script>
<script type="text/javascript" src="//unpkg.com/file-saver@1.3.3/FileSaver.js"></script>


<div id="container2">
  <title>SheetJS Table Export</title>
  <table id="data-table">
    <tr>
      <td>ID</td>
      <td>Name</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Johnny</td>
    </tr>
  </table>
</div>
<p id="xportxlsx" class="xport"><input type="submit" value="Export to XLSX!" onclick="doit('xlsx');"></p>


<script type="text/javascript">

function doit(type, fn, dl) {
    var elt = document.getElementById('data-table');
    var wb = XLSX.utils.table_to_book(elt, {sheet:"Sheet JS"});
    return dl ?
        XLSX.write(wb, {bookType:type, bookSST:true, type: 'base64'}) :
        XLSX.writeFile(wb, fn || ('test.' + (type || 'xlsx')));
}


function tableau(pid, iid, fmt, ofile) {
    if(typeof Downloadify !== 'undefined') Downloadify.create(pid,{
            swf: 'downloadify.swf',
            downloadImage: 'download.png',
            width: 100,
            height: 30,
            filename: ofile, data: function() { return doit(fmt, ofile, true); },
            transparent: false,
            append: false,
            dataType: 'base64',
            onComplete: function(){ alert('Your File Has Been Saved!'); },
            onCancel: function(){ alert('You have cancelled the saving of this file.'); },
            onError: function(){ alert('You must put something in the File Contents or there will be nothing to save!'); }
    });
}
tableau('xlsxbtn',  'xportxlsx',  'xlsx',  'test.xlsx');

</script>

旧答案：如果 sheetjs 不起作用，您可以使用变通方法。例如，Datatable 工具有一个用于将 HTML table 导出到 Excel 的插件。演示：https://datatables.net/extensions/buttons/examples/initialisation/export.html

例如，您可以在隐藏的 div 中加载数据table，然后您的按钮 "myBtn" 启动导出感谢 Excel 数据table导出按钮

使用 sheets.js 插件将 HTML table 转换为纯 JavaScript 中的 Excel 文件

Convert HTML table to Excel file in pure JavaScript using sheets.js plugin

jquery

js-xlsx