如何使用JavaScript将html表格导出为excel
我的表格是格式
<table id="mytable"> <thead> <tr> <th>name</th> <th>place</th> </tr> </thead> <tbody> <tr> <td>adfas</td> <td>asdfasf</td> </tr> </tbody> </table> 我在网上find了下面的代码。 但是，如果我使用“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; } }
您在互联网上find的解决scheme无效的原因是由于启动var colCount的行。 variablesmytable只有两个元素<thead>和<tbody> 。 var colCount行正在寻找mytable中<tr>所有元素。 你可以做的最好的事情是给你的<thead>和<tbody>一个id，然后抓住所有的值。 假设你有<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; } } }
然后为<tbody>标签做同样的事情。
编辑：我也强烈推荐使用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; }); }
现在，当然，这会给你一些格式问题，但你可以计算出你想如何在Excel中格式化。
编辑：要回答你如何为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]); }
然后将function write_headers_to_excel()更改为function write_headers_to_excel(table) 。 然后更改var myTableHead = document.getElementById('headers'); to var myTableHead = table.getElementsByTagName('thead')[0]; 。 和你的write_bodies_to_excel()或者你想设置它。
只适用于Mozilla，Chrome和Safari ..
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"> </script> <script type="text/javascript"> $(function(){ $('button').click(function(){ var url='data:application/vnd.ms-excel,' + encodeURIComponent($('#tableWrap').html()) location.href=url return false }) }) </script> <style type="text/css"> </style> <title>Untitled</title> </head> <body> <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> </body> </html>
这可能是从这个问题复制更好的答案。 请尝试它并在这里给意见。 如果发现有用，请投票。 谢谢。
<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>
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>
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) { } }
检查了这一点…我刚刚得到这个工作，这似乎正是你想要做的以及。
2个function。 一个select表并将其复制到剪贴板，第二个将其写入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; }
重大影响来自： select一个完整的表与Javascript（将被复制到剪贴板）
我想你也可以考虑替代架构。 有时候用另一种方式可以做得更容易些。 如果您是HTML文件的制作者，那么您可以编写一个HTTP处理程序来在服务器上创build一个Excel文档（这比在JavaScript中更容易），并将文件发送到客户端。 如果您从某个地方（如报表的HTML版本）接收到该HTML文件，那么仍然可以使用C＃或PHP等服务器端语言来创buildExcel文件。 我的意思是，你也可能有其他的方式。 🙂
我会build议使用不同的方法。 在网页上添加一个button，将表格的内容复制到剪贴板，在行与列之间使用TAB字符，在行之间使用换行符。 这样，Excel中的“粘贴”function应该可以正常工作，并且您的Web应用程序也可以在许多浏览器和许多操作系统（linux，mac，mobile）上工作，用户也可以使用其他电子表格或文字处理程式。
唯一棘手的部分是复制到剪贴板，因为许多浏览器是安全的痴迷于此。 一个解决scheme是准备已经在textarea中select的数据，并在模式对话框中显示给用户，在那里你告诉用户复制文本（一些需要键入Ctrl-C，其他的Command-c，其他的将会使用“长按”或popup式菜单）。
有一个标准的复制到剪贴板function，可能会要求用户确认更好…但不幸的是，情况并非如此。
我用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++ }); };
在你的类中使用它，并用$ .printInExcel（ 你的var ）调用它。
