Javascript 如何使用javascript将html表格导出到excel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6566831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to export html table to excel using javascript
提问by user755043
My table is in format
我的表格是格式
<table id="mytable">
<thead>
<tr>
<th>name</th>
<th>place</th>
</tr>
</thead>
<tbody>
<tr>
<td>adfas</td>
<td>asdfasf</td>
</tr>
</tbody>
</table>
I found the following code online. But it doesn't work if i use "thead" and "tbody" tags
我在网上找到了以下代码。但是如果我使用“thead”和“tbody”标签就行不通了
function write_to_excel() {
str = "";
var mytable = document.getElementsByTagName("table")[0];
var rowCount = mytable.rows.length;
var colCount = mytable.getElementsByTagName("tr")[0].getElementsByTagName("td").length;
var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
ExcelSheet.Application.Visible = true;
for (var i = 0; i < rowCount; i++) {
for (var j = 0; j < colCount; j++) {
str = mytable.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML;
ExcelSheet.ActiveSheet.Cells(i + 1, j + 1).Value = str;
}
}
采纳答案by Charles Caldwell
The reason the solution you found on the internet is no working is because of the line that starts var colCount. The variable mytableonly has two elements being <thead>and <tbody>. The var colCountline is looking for all the elements within mytablethat are <tr>. The best thing you can do is give an id to your <thead>and <tbody>and then grab all the values based on that. Say you had <thead id='headers'>:
您在互联网上找到的解决方案不起作用的原因是因为开头的行var colCount。该变量mytable只有两个元素是<thead>和<tbody>。该var colCount行正在寻找内的所有元素mytable是<tr>。你能做的最好的事情就是给一个id你<thead>和<tbody>然后抓住所有基于该值。说你有<thead id='headers'>：
function write_headers_to_excel()
{
str="";
var myTableHead = document.getElementById('headers');
var rowCount = myTableHead.rows.length;
var colCount = myTableHead.getElementsByTagName("tr")[0].getElementsByTagName("th").length;
var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
ExcelSheet.Application.Visible = true;
for(var i=0; i<rowCount; i++)
{
for(var j=0; j<colCount; j++)
{
str= myTableHead.getElementsByTagName("tr")[i].getElementsByTagName("th")[j].innerHTML;
ExcelSheet.ActiveSheet.Cells(i+1,j+1).Value = str;
}
}
}
and then do the same thing for the <tbody>tag.
然后对<tbody>标签做同样的事情。
EDIT: I would also highly recommend using jQuery. It would shorten this up to:
编辑：我也强烈推荐使用 jQuery。它将缩短为：
function write_to_excel()
{
var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
ExcelSheet.Application.Visible = true;
$('th, td').each(function(i){
ExcelSheet.ActiveSheet.Cells(i+1,i+1).Value = this.innerHTML;
});
}
Now, of course, this is going to give you some formatting issues but you can work out how you want it formatted in Excel.
现在，当然，这会给您带来一些格式问题，但您可以确定如何在 Excel 中对其进行格式化。
EDIT: To answer your question about how to do this for nnumber of tables, the jQuery will do this already. To do it in raw Javascript, grab all the tables and then alter the function to be able to pass in the table as a parameter. For instance:
编辑：要回答您关于如何为n多个表执行此操作的问题，jQuery 将已执行此操作。要在原始 Javascript 中执行此操作，请获取所有表，然后更改函数以便能够将表作为参数传入。例如：
var tables = document.getElementsByTagName('table');
for(var i = 0; i < tables.length; i++)
{
write_headers_to_excel(tables[i]);
write_bodies_to_excel(tables[i]);
}
Then change the function write_headers_to_excel()to function write_headers_to_excel(table). Then change var myTableHead = document.getElementById('headers');to var myTableHead = table.getElementsByTagName('thead')[0];. Same with your write_bodies_to_excel()or however you want to set that up.
然后将 更改function write_headers_to_excel()为function write_headers_to_excel(table)。然后更改var myTableHead = document.getElementById('headers');为var myTableHead = table.getElementsByTagName('thead')[0];. 与您的write_bodies_to_excel()或您想设置的相同。
回答by Tabares
Only works in Mozilla, Chrome and Safari..
仅适用于 Mozilla、Chrome 和 Safari。
$(function() {
$('button').click(function() {
var url = 'data:application/vnd.ms-excel,' + encodeURIComponent($('#tableWrap').html())
location.href = url
return false
})
});<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js">
</script>
<button>click me</button>
<div id="tableWrap">
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>回答by Rohith
Check https://github.com/linways/table-to-excel. Its a wrapper for exceljs/exceljsto export html tables to xlsx.
检查https://github.com/linways/table-to-excel。它是exceljs/exceljs的包装器，用于将 html 表导出到 xlsx。
TableToExcel.convert(document.getElementById("simpleTable1"));<script src="https://cdn.jsdelivr.net/gh/linways/[email protected]/dist/tableToExcel.js"></script>
<table id="simpleTable1" data-cols-width="70,15,10">
<tbody>
<tr>
<td class="header" colspan="5" data-f-sz="25" data-f-color="FFFFAA00" data-a-h="center" data-a-v="middle" data-f-underline="true">
Sample Excel
</td>
</tr>
<tr>
<td colspan="5" data-f-italic="true" data-a-h="center" data-f-name="Arial" data-a-v="top">
Italic and horizontal center in Arial
</td>
</tr>
<tr>
<th data-a-text-rotation="90">Col 1 (number)</th>
<th data-a-text-rotation="vertical">Col 2</th>
<th data-a-wrap="true">Wrapped Text</th>
<th data-a-text-rotation="-45">Col 4 (date)</th>
<th data-a-text-rotation="-90">Col 5</th>
</tr>
<tr>
<td rowspan="1" data-t="n">1</td>
<td rowspan="1" data-b-b-s="thick" data-b-l-s="thick" data-b-r-s="thick">
ABC1
</td>
<td rowspan="1" data-f-strike="true">Striked Text</td>
<td data-t="d">05-20-2018</td>
<td data-t="n" data-num-fmt="$ 0.00">2210.00</td>
</tr>
<tr>
<td rowspan="2" data-t="n">2</td>
<td rowspan="2" data-fill-color="FFFF0000" data-f-color="FFFFFFFF">
ABC 2
</td>
<td rowspan="2" data-a-indent="3">Merged cell</td>
<td data-t="d">05-21-2018</td>
<td data-t="n" data-b-a-s="dashed" data-num-fmt="$ 0.00">230.00</td>
</tr>
<tr>
<td data-t="d">05-22-2018</td>
<td data-t="n" data-num-fmt="$ 0.00">2493.00</td>
</tr>
<tr>
<td colspan="4" align="right" data-f-bold="true" data-a-h="right" data-hyperlink="https://google.com">
<b><a href="https://google.com">Hyperlink</a></b>
</td>
<td colspan="1" align="right" data-t="n" data-f-bold="true" data-num-fmt="$ 0.00">
<b>4933.00</b>
</td>
</tr>
<tr>
<td colspan="4" align="right" data-f-bold="true" data-a-rtl="true">
?????
</td>
<td colspan="1" align="right" data-t="n" data-f-bold="true" data-num-fmt="$ 0.00">
<b>2009.00</b>
</td>
</tr>
<tr>
<td data-b-a-s="dashed" data-b-a-c="FFFF0000">All borders</td>
</tr>
<tr>
<td data-t="b">true</td>
<td data-t="b">false</td>
<td data-t="b">1</td>
<td data-t="b">0</td>
<td data-error="#VALUE!">Value Error</td>
</tr>
<tr>
<td data-b-t-s="thick" data-b-l-s="thick" data-b-b-s="thick" data-b-r-s="thick" data-b-t-c="FF00FF00" data-b-l-c="FF00FF00" data-b-b-c="FF00FF00" data-b-r-c="FF00FF00">
All borders separately
</td>
</tr>
<tr data-exclude="true">
<td>Excluded row</td>
<td>Something</td>
</tr>
<tr>
<td>Included Cell</td>
<td data-exclude="true">Excluded Cell</td>
<td>Included Cell</td>
</tr>
</tbody>
</table>This creates valid xlsx on the client side. Also supports some basic styling. Check https://codepen.io/rohithb/pen/YdjVbbfor a working example.
这会在客户端创建有效的 xlsx。还支持一些基本的样式。检查https://codepen.io/rohithb/pen/YdjVbb以获取工作示例。
回答by prashu132
This might be a better answer copied from this question. Please try it and give opinion here. Please vote up if found useful. Thank you.
这可能是从这个问题复制的更好的答案。请尝试并在此处发表意见。如果觉得有用，请投票。谢谢你。
<script type="text/javascript">
function generate_excel(tableid) {
var table= document.getElementById(tableid);
var html = table.outerHTML;
window.open('data:application/vnd.ms-excel;base64,' + base64_encode(html));
}
function base64_encode (data) {
// http://kevin.vanzonneveld.net
// + original by: Tyler Akins (http://rumkin.com)
// + improved by: Bayron Guevara
// + improved by: Thunder.m
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Pellentesque Malesuada
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Rafal Kukawski (http://kukawski.pl)
// * example 1: base64_encode('Kevin van Zonneveld');
// * returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
// mozilla has this native
// - but breaks in 2.0.0.12!
//if (typeof this.window['btoa'] == 'function') {
// return btoa(data);
//}
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
ac = 0,
enc = "",
tmp_arr = [];
if (!data) {
return data;
}
do { // pack three octets into four hexets
o1 = data.charCodeAt(i++);
o2 = data.charCodeAt(i++);
o3 = data.charCodeAt(i++);
bits = o1 << 16 | o2 << 8 | o3;
h1 = bits >> 18 & 0x3f;
h2 = bits >> 12 & 0x3f;
h3 = bits >> 6 & 0x3f;
h4 = bits & 0x3f;
// use hexets to index into b64, and append result to encoded string
tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
} while (i < data.length);
enc = tmp_arr.join('');
var r = data.length % 3;
return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);
}
</script>
回答by sampopes
Excel Export Script works on IE7+ , Firefox and 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);
}
Just Create a blank iframe
enter code here
<iframe id="txtArea1" style="display:none"></iframe>
Call this function on
<button id="btnExport" onclick="fnExcelReport();"> EXPORT
</button>
回答by Sameh el Behairy
function XLExport() {
try {
var i;
var j;
var mycell;
var tableID = "tblInnerHTML";
var objXL = new ActiveXObject("Excel.Application");
var objWB = objXL.Workbooks.Add();
var objWS = objWB.ActiveSheet;
for (i = 0; i < document.getElementById('<%= tblAuditReport.ClientID %>').rows.length; i++) {
for (j = 0; j < document.getElementById('<%= tblAuditReport.ClientID %>').rows(i).cells.length; j++) {
mycell = document.getElementById('<%= tblAuditReport.ClientID %>').rows(i).cells(j);
objWS.Cells(i + 1, j + 1).Value = mycell.innerText;
}
}
//objWS.Range("A1", "L1").Font.Bold = true;
objWS.Range("A1", "Z1").EntireColumn.AutoFit();
//objWS.Range("C1", "C1").ColumnWidth = 50;
objXL.Visible = true;
}
catch (err) {
}
}
回答by dah97765
Check this out... I just got this working and it seems exactly what you are trying to do as well.
看看这个......我刚刚开始工作，这似乎也正是你想要做的。
2 functions. One to select the table and copy it to the clipboard, and the second writes it to excel en masse. Just call write_to_excel() and put in your table id (or modify it to take it as an argument).
2 功能。一个选择表格并将其复制到剪贴板，第二个将其写入excel。只需调用 write_to_excel() 并输入您的表 ID（或修改它以将其作为参数）。
function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
range.execCommand("Copy");
}
function write_to_excel()
{
var tableID = "AllItems";
selectElementContents( document.getElementById(tableID) );
var excel = new ActiveXObject("Excel.Application");
// excel.Application.Visible = true;
var wb=excel.WorkBooks.Add();
var ws=wb.Sheets("Sheet1");
ws.Cells(1,1).Select;
ws.Paste;
ws.DrawingObjects.Delete;
ws.Range("A1").Select
excel.Application.Visible = true;
}
Heavily influenced from: Select a complete table with Javascript (to be copied to clipboard)
回答by Saeed Neamati
I think you can also think of alternative architectures. Sometimes something can be done in another way much more easier. If the producer of HTML file is you, then you can write an HTTP handler to create an Excel document on the server (which is much more easier than in JavaScript) and send a file to the client. If you receive that HTML file from somewhere (like an HTML version of a report), then you still can use a server side language like C# or PHP to create the Excel file still very easily. I mean, you may have other ways too. :)
我认为您也可以考虑替代架构。有时可以用另一种更容易的方式完成某些事情。如果 HTML 文件的制作者是您，那么您可以编写一个 HTTP 处理程序在服务器上创建一个 Excel 文档（这比在 JavaScript 中容易得多）并将文件发送到客户端。如果您从某处收到该 HTML 文件（如报告的 HTML 版本），那么您仍然可以使用服务器端语言（如 C# 或 PHP）轻松创建 Excel 文件。我的意思是，你可能还有其他方法。:)
回答by ali youhannaee
I try this with jquery; use this and have fun :D
我用 jquery 试试这个；使用它并玩得开心：D
jQuery.printInExcel = function (DivID)
{
var ExcelApp = new ActiveXObject("Excel.Application");
ExcelApp.Workbooks.Add;
ExcelApp.visible = true;
var str = "";
var tblcount = 0;
var trcount = 0;
$("#" + DivID + " table").each(function ()
{ $(this).find("tr").each(function ()
{ var tdcount = 0; $(this).find("td").each(function ()
{ str = str + $(this).text(); ExcelApp.Cells(trcount + 1, tdcount + 1).Value = str;
str = ""; tdcount++
});
trcount++
}); tblcount++
});
};
use this in your class and call it with $.printInExcel(your var);
在你的课堂上使用它并用 $.printInExcel( your var)调用它；
回答by 6502
I would suggest using a different approach. Add a button on the webpage that will copy the content of the table to the clipboard, with TAB chars between columns and newlines between rows. This way the "paste" function in Excel should work correctly and your web application will also work with many browsers and on many operating systems (linux, mac, mobile) and users will be able to use the data also with other spreadsheets or word processing programs.
我建议使用不同的方法。在网页上添加一个按钮，将表格的内容复制到剪贴板，在列之间使用 TAB 字符，在行之间使用换行符。这样，Excel 中的“粘贴”功能应该可以正常工作，并且您的 Web 应用程序也可以在许多浏览器和许多操作系统（linux、mac、手机）上运行，并且用户还可以将数据与其他电子表格或文字处理一起使用程式。
The only tricky part is to copy to the clipboard because many browsers are security obsessed on this. A solution is to prepare the data already selected in a textarea, and show it to the user in a modal dialog box where you tell the user to copy the text (some will need to type Ctrl-C, others Command-c, others will use a "long touch" or a popup menu).
唯一棘手的部分是复制到剪贴板，因为许多浏览器都对此着迷。一个解决方案是准备已经在 textarea 中选择的数据，并在一个模式对话框中向用户显示它，在那里你告诉用户复制文本（有些需要输入 Ctrl-C，其他的需要输入 Command-c，其他的将使用“长按”或弹出菜单）。
It would be nicer to have a standard copy-to-clipboard function that possibly requests a user confirmation... but this is not the case, unfortunately.
最好有一个标准的复制到剪贴板功能，可能需要用户确认……但不幸的是，情况并非如此。
