Question

I am trying to open html table in xls on click of a button. I already have a way (using javascript) to export the html table in xls through "save as". Here I have to save the resulting xls file and then I can open it. Now I want to improve it so on click of button from html page, the html table should be opened in xls without need for "save as".

This is the javascript I am trying to use:

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");
}

From html I am trying to call this function fnExcelReport() using:

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

But I keep getting following error:

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

Google search for this error shows you cannot put the script reference to jquery-ui before the jquery script itself. But I am not using JQuery. Other things I tried still give the same error "Uncaught ReferenceError: $ is not defined" just at different line number due to changes.

I tried adding:

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

And add call to function fnExcelReport() inside document ready.
Also tried including whole function fnExcelReport() inside document ready and then adding $("#btnExport").click(fnExcelReport); before closing document ready. For this removed onclick="fnExcelReport();" from button element.

Both above methods still give same error "Uncaught ReferenceError: $ is not defined".

Can someone help me find what I am doing wrong or suggest any alternate way to get this done?

Answer 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);

How to open html table in xls on click of a button

1 个答案:

如果要使用FileSaver.js库：