如何在单击按钮时在 xls 中打开 html 表格答案

【问题标题】：How to open html table in xls on click of a button如何在单击按钮时在 xls 中打开 html 表格
【发布时间】：2017-03-02 23:33:02
【问题描述】：

我试图通过单击按钮在 xls 中打开 html 表。我已经有一种方法（使用javascript）通过“另存为”导出xls中的html表。在这里，我必须保存生成的 xls 文件，然后才能打开它。现在我想改进它，所以点击 html 页面上的按钮，html 表应该在 xls 中打开，而不需要“另存为”。

这是我正在尝试使用的 javascript：

function fnExcelReport() {
    var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
    tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';
    tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';
    tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
    tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
    tab_text = tab_text + "<table>";
    var headingTable = $("#tableData").clone();//In my html table id="tableData"
    tab_text = tab_text + headingTable.html();
    tab_text = tab_text + '</table>';
    $('.c_tbl').each(function( index ) {
        tab_text = tab_text + "<table>";
        tab_text = tab_text + "<tr><td></td></tr><tr><td></td></tr>";
        tab_text = tab_text + '</table>';
        tab_text = tab_text + "<table>";
        var exportTable = $(this).clone();
        tab_text = tab_text + exportTable.html();
        tab_text = tab_text + '</table>';
    });
    tab_text = tab_text + '</body></html>';
    var fileName = name + '.xls';
    var blob = new Blob([tab_text], { type: "application/vnd.ms-excel;charset=utf-8" })
    window.saveAs(blob, wo_var + ".xls");
}

我试图从 html 调用这个函数 fnExcelReport() 使用：

<button id="btnExport" onclick="fnExcelReport();">Open as Excel</button>

但我不断收到以下错误：

openInExcel.js:8 Uncaught ReferenceError: $ is not defined
    at fnExcelReport (openInExcel.js:8)
    at HTMLButtonElement.onclick (Test.html:103)

Google 搜索此错误显示您不能将 jquery-ui 的脚本引用放在 jquery 脚本本身之前。但我没有使用 JQuery。由于更改，我尝试的其他事情仍然在不同的行号处给出相同的错误“未捕获的 ReferenceError：$ 未定义”。

我尝试添加：

$(document).ready(function(){ });

并在准备好的文档中添加对函数 fnExcelReport() 的调用。
还尝试将整个函数 fnExcelReport() 包含在准备好的文档中，然后在准备好关闭文档之前添加 $("#btnExport").click(fnExcelReport);。为此从按钮元素中删除了onclick="fnExcelReport();"。

上述两种方法仍然给出相同的错误“Uncaught ReferenceError: $ is not defined”。

有人可以帮我找出我做错了什么或建议任何替代方法来完成这项工作吗？

【问题讨论】：

“但我没有使用 JQuery。” ? var headingTable = $("#tableData").clone();, $('.c_tbl').each(function( index ) {})
哦，原来我是在不知不觉中使用的。

标签： javascript html excel

【解决方案1】：

实际上，您正在使用 jQuery：$ 是 jQuery() 函数的别名。如果我是你，我会包括 jQuery（来自 CDN）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

或者，您可以重写这些行：

var headingTable = $("#tableData").clone();//In my html table id="tableData"
tab_text = tab_text + headingTable.html();
....
$('.c_tbl').each(function( index ) {
....
var exportTable = $(this).clone();

作为：

var headingTable = document.getElementById('tableData').cloneNode(true);
tab_text = tab_text + headingTable.innerHTML;
....
var els = document.getElementsByClassName('c_tbl');
for(var i=0; i < els.length; i++) {
....
var exportTable = els[i].cloneNode(true);
tab_text = tab_text + exportTable.innerHTML;

如果你想使用 FileSaver.js 库：

在您的 HTML 中包含来自 CDN 的库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

把你的 JS 改成这样：

var blob = new Blob([tab_text], { type: "application/vnd.ms-excel;charset=utf-8" });
saveAs(blob, fileName);

【讨论】：

感谢您的建议，威尔。我确实尝试按照您的建议包含 JQuery，但在行出现错误：window.saveAs(blob, wo_var + ".xls");错误：未捕获的 ReferenceError：wo_var 未定义所以我进行了如下更改：window.saveAs(blob, fileName);现在我得到了这个错误： Uncaught TypeError: window.saveAs is not a function 我不知道为什么会发生这种情况我试图将 html 和 java 脚本都放在一个简单的例子中，看看它是否有帮助。
所以window.saveAs还不完全支持，变通方法很复杂。 IE/Edge 有msSaveBlob and msSaveOrOpenBlob，而 Firefox 和 Chrome 需要更复杂的 JS 函数才能使其工作（参见this blog 和this fiddle）。我认为最好的方法是使用FileSaver.js 库。我将把这个解决方案放在我上面的答案中。