使用sheets.js插件将HTML表格转换为纯JavaScript格式的Excel文件
使用sheets.js插件将HTML表格转换为纯JavaScript格式的Excel文件
提问于 2018-06-29 22:59:15
我在Stack Overflow上找不到针对我的特定问题的现有问题/答案，所以我发布了这篇文章。我有一个用HTML和jQuery/JavaScript编写的应用程序。我需要使用jsxlsx (sheetsjs)插件将HTML表导出到Excel工作表中。我试着复制他们的例子，将HTML表格转换成Excel，但程序出错。这是我目前所拥有的：
我的HTML代码在一个名为books.cfm的coldfusion页面中。我在一个名为Utils.js的文件中保存了我的JavaScript。它们是：
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代码。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-29 23:33:11
使用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表导出到Excel的插件。演示：https://datatables.net/extensions/buttons/examples/initialisation/export.html
例如，您可以在隐藏的div中加载Datatable，然后您的按钮"myBtn“将启动Export to Excel Datatable导出按钮
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51104559
复制相关文章
相似问题