使用JavaScript/JQuery将html表数据导出到Excel在chrome浏览中无法正常工作
Suk*_*ane 83 html javascript excel jquery google-chrome
我在速度模板中有一个HTML表格.我想使用java脚本或jquery,comatibale和所有浏览器将html表数据导出到excel.我正在使用下面的脚本
<script type="text/javascript">
function ExportToExcel(mytblId){
var htmltable= document.getElementById('my-table-id');
var html = htmltable.outerHTML;
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
}
</script>
这个脚本在Mozilla Firefox中工作正常,它弹出一个excel对话框,并要求打开或保存选项.但是当我在Chrome浏览器中测试相同的脚本时,它没有按预期工作,当点击按钮时,没有弹出的Excel.数据被下载到一个带有"文件类型:文件"的文件中,没有像.xls那样的扩展名 在chrome控制台中没有错误.
Jsfiddle的例子:
http://jsfiddle.net/insin/cmewv/
这在mozilla中运行良好,但在chrome中不行.
Chrome浏览器测试用例:
第一张图片:我点击导出到Excel按钮
结果:
sam*_*pes 143
Excel导出脚本适用于IE7 +,Firefox和Chrome.
function fnExcelReport()
{
var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange; var j=0;
tab = document.getElementById('headerTable'); // id of table
for(j = 0 ; j < tab.rows.length ; j++)
{
tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text=tab_text+"</table>";
tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
txtArea1.document.open("txt/html","replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
}
else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
}
只需创建一个空白iframe:
<iframe id="txtArea1" style="display:none"></iframe>
调用此函数:
<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>
- "download.xls的文件格式和扩展名不匹配"这不是让经理高兴:/任何想法？ (17认同)
- 如何更改Randome名称.我会设置specefic名称. (6认同)
- 在Chrome中,当您单击下载按钮时,使用此方法时根本没有任何反应.没有控制台错误或任何东西 (2认同)
- 是否可以将文件名从“download.xls”更改为其他名称？ (2认同)
- 导出名称始终为“download.xls” (2认同)
Adi*_*tya 31
Datatable插件最大限度地解决了目的,并允许我们将HTML表格数据导出为Excel,PDF,TEXT.易于配置.
请在以下数据表参考链接中找到完整示例:
https://datatables.net/extensions/buttons/examples/html5/simple.html
(来自数据表参考站点的截图)
- 我的天啊!这是一个很棒的插件!...并嵌入了几个插件!导出,排序,重新排序,打印预览等...解决了所有我的数据只显示一次拍摄需求! (4认同)
tod*_*sde 25
这可能有所帮助
function exportToExcel(){
var htmls = "";
var uri = 'data:application/vnd.ms-excel;base64,';
var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';
var base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)))
};
var format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
})
};
htmls = "YOUR HTML AS TABLE"
var ctx = {
worksheet : 'Worksheet',
table : htmls
}
var link = document.createElement("a");
link.download = "export.xls";
link.href = uri + base64(format(template, ctx));
link.click();
}
- 如果我只想导出在 html 表中可见的列怎么办？ (2认同)
Ama*_*pta 15
您可以使用tableToExcel.js导出 Excel 文件中的表格。
这以下列方式工作：
1）。在您的项目/文件中包含此 CDN
<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
2）。使用 JavaScript：
<button id="btnExport" onclick="exportReportToExcel(this)">EXPORT REPORT</button>
function exportReportToExcel() {
let table = document.getElementsByTagName("table"); // you can use document.getElementById('tableId') as well by providing id to the table tag
TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
name: `export.xlsx`, // fileName you could use any name
sheet: {
name: 'Sheet 1' // sheetName
}
});
}
3）。或者通过使用 Jquery
<button id="btnExport">EXPORT REPORT</button>
$(document).ready(function(){
$("#btnExport").click(function() {
let table = document.getElementsByTagName("table");
TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
name: `export.xlsx`, // fileName you could use any name
sheet: {
name: 'Sheet 1' // sheetName
}
});
});
});
您可以参考此 github 链接以获取任何其他信息
https://github.com/linways/table-to-excel/tree/master
或参考现场示例访问以下链接
https://codepen.io/rohithb/pen/YdjVbb
希望这会帮助某人:-)
http://wsnippets.com/export-html-table-data-excel-sheet-using-jquery/ 尝试此链接可能会解决您的问题
- 我已经在jsfiddle上尝试了你的代码,我得到了积极的结果.它即使在chorme也能正常工作.您可以在上面的图像中看到下载是成功的 (5认同)
小智 7
我对这些例子的合并：
https://www.codexworld.com/export-html-table-data-to-excel-using-javascript https://bl.ocks.org/Flyer53/1de5a78de9c89850999c
function exportTableToExcel(tableId, filename) {
let dataType = 'application/vnd.ms-excel';
let extension = '.xls';
let base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)))
};
let template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';
let render = function(template, content) {
return template.replace(/{(\w+)}/g, function(m, p) { return content[p]; });
};
let tableElement = document.getElementById(tableId);
let tableExcel = render(template, {
worksheet: filename,
table: tableElement.innerHTML
});
filename = filename + extension;
if (navigator.msSaveOrOpenBlob)
{
let blob = new Blob(
[ '\ufeff', tableExcel ],
{ type: dataType }
);
navigator.msSaveOrOpenBlob(blob, filename);
} else {
let downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = 'data:' + dataType + ';base64,' + base64(tableExcel);
downloadLink.download = filename;
downloadLink.click();
}
}
TableExport-简单，易于实现的库，用于将HTML表导出到xlsx，xls，csv和txt文件。
要使用此库，只需调用TableExport构造函数：
new TableExport(document.getElementsByTagName("table"));
// OR simply
TableExport(document.getElementsByTagName("table"));
// OR using jQuery
$("table").tableExport();
可以传入其他属性，以自定义表格，按钮和导出数据的外观。在这里查看更多信息
window.open您可以使用onclick事件链接来代替使用。
您可以将html表放入uri并设置要下载的文件名。
现场演示：
function exportF(elem) {
var table = document.getElementById("table");
var html = table.outerHTML;
var url = 'data:application/vnd.ms-excel,' + escape(html); // Set your html table into url
elem.setAttribute("href", url);
elem.setAttribute("download", "export.xls"); // Choose the file name
return false;
}<table id="table" border="1">
<tr>
<td>
Foo
</td>
<td>
Bar
</td>
</tr>
</table>
<a id="downloadLink" onclick="exportF(this)">Export to excel</a>小智 5
使用 Jquery 的最简单方法
只需添加这个：
<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
然后添加 Jquery 脚本：
<script type="text/javascript">
$(document).ready(function () {
$("#exportBtn1").click(function(){
TableToExcel.convert(document.getElementById("tab1"), {
name: "Traceability.xlsx",
sheet: {
name: "Sheet1"
}
});
});
});
</script>
然后添加 HTML 按钮：
<button id="exportBtn1">Export To Excel</button><br><br>
注意："exportBtn1"将是按钮 ID，“tab1”将是表 ID
| 归档时间： |
|
| 查看次数： |
434156 次 |
| 最近记录： |