如何在xls中打开html表单，点击一个按钮 [英] How to open html table in xls on click of a button
问题描述
我想在xls中打开html表，点击一个按钮。我已经有一个方法（使用javascript）通过另存为导出xls中的html表。这里我必须保存生成的xls文件，然后我可以打开它。现在我想改进它，所以从html页面点击按钮，html表应该在xls中打开，而不需要另存为。
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".
这是javascript我试图使用：
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");
}
从html我试图用fnExcelReport（）调用这个函数： p>
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搜索此错误表明您无法在jquery脚本本身之前将脚本引用到jquery-ui 。但是我没有使用JQuery。我尝试的其他东西仍然给出相同的错误未被引用的错误：$没有定义只是在不同的行号由于更改。
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（）{
}）;
$(document).ready(function(){ });
并在文件中添加对函数fnExcelReport（）的调用。
And add call to function fnExcelReport() inside document ready.
还尝试在文档中包含整个函数fnExcelReport（），然后添加 $（＃btnExport）。click（fnExcelReport） ; 在关闭文档准备好之前。对于此删除的 onclick =fnExcelReport（）;从按钮元素。
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.
以上两种方法仍然给出相同的错误未捕获的ReferenceError：$未定义。
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?
推荐答案
实际上，你使用jQuery：$是jQuery（）函数的别名。如果我是你，我会包括jQuery（从CDN）：
Actually, you are using jQuery: the $ is an alias to the jQuery() function. If I were you, I would either include jQuery (from the CDN):
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
或者，您可以重写这些行：
Or, you can rewrite these lines:
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();
as：
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中的库：
If you want to use the FileSaver.js library:
Include the library from the CDN in your HTML:
<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);
这篇关于如何在xls中打开html表单，点击一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
