jquery4种导出excel方法(已测试)
第一种:(导出格式:csv、txt、excel、word、png)

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <div> <ul class="dropdown-menu"> <li> <a onclick="$('#stats_datatable').tableExport({type:'csv',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#"> 导出格式-CSV </a> </li> <li> <a onclick="$('#stats_datatable').tableExport({type:'txt',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#"> 导出格式-TXT </a> </li> <li> <a onclick="$('#stats_datatable').tableExport({type:'excel',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#"> 导出格式-Excel </a> </li> <li> <a onclick="$('#stats_datatable').tableExport({type:'doc',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#"> 导出格式-Word </a> </li> <li> <a onclick="$('#stats_datatable').tableExport({type:'png',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#"> 导出格式-PNG </a> </li> </ul> </div> <div class="panel-body"> <table id="stats_datatable" class="table datatable"> <thead> <tr> <th>名称</th> <th>里程</th> <th>次数</th> <th>天数</th> <th>签到</th> <th>活动</th> <th>时间周期</th> <th>更新时间</th> </tr> </thead> <tbody></tbody> </table> </div> <!-- START SCRIPTS --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- 数据表 --> <script src="js/tableExport.js"></script> <script src="js/mybase.js"></script> <script> $(function () { //=======让解码后中文不出现乱码的方法 data = $.base64({ data: "已经编码过后的base64", type: 1, unicode: true }); //=或 data = $.base64({ data: "已经编码过后的base64", type: 1 }); console.log(data); //downloadFile("myexcel.xls", data); }); </script> </body> </html>
第二种:(导出数据量少的情况导出带样式的)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据量少的情况导出带样式的</title> <style> table td { font-size: 12px; width: 200px; height: 30px; text-align: center; background-color: #4f891e; color: #ffffff; } </style> </head> <body> <a download="table导出Excel" id="excelOut" href="#">table导出Excel</a> <table cellspacing="0" cellpadding="0" border="1" id="tableToExcel"> <thead> <tr> <td>公司一</td> <td>公司二一</td> <td>公司三</td> </tr> </thead> <tbody> <tr> <td>A公司</td> <td>B公司</td> <td>C公司</td> </tr> <tr> <td>A公司</td> <td>B公司</td> <td>C公司</td> </tr> <tr> <td>A公司</td> <td>B公司</td> <td>C公司</td> </tr> <tr> <td colspan="3">共计</td> </tr> </tbody> </table> <script> window.onload = function () { tableToExcel('tableToExcel', '下载模板') }; //base64转码 var base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); }; //替换table数据和worksheet名字 var format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }); } function tableToExcel(tableid, sheetName) { 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]-->' + ' <style type="text/css">' + 'table td {' + 'border: 1px solid #000000;' + 'width: 200px;' + 'height: 30px;' + ' text-align: center;' + 'background-color: #4f891e;' + 'color: #ffffff;' + ' }' + '</style>' + '</head><body ><table class="excelTable">{table}</table></body></html>'; if (!tableid.nodeType) tableid = document.getElementById(tableid); var ctx = { worksheet: sheetName || 'Worksheet', table: tableid.innerHTML }; document.getElementById("excelOut").href = uri + base64(format(template, ctx)); } </script> </body> </html>
第三种:(导出数据量稍大,但是附带的有html标签未修改完善)
my_tableExcel.js 百度网盘下载地址:https://pan.baidu.com/s/1smU3fTb

<html> <head> <title>Demo Jquery Table2Excel</title> </head> <body> <table style="width: 100%;" cellpadding=0 cellspacing=0 border="1" id="tblExport"> <tr> <td colspan="5" align="center"> <h2>成绩单</h2> </td> </tr> <tr> <td align="center">2</td> <td style="background-color: #00CC00;" align="center">Tom</td> <td style="background-color: #00adee;" align="center">99</td> <td style="background-color: #00CC00;" align="center">85</td> <td style="background-color: #00adee;" align="center">80</td> </tr> <tr> <td align="center">2</td> <td style="background-color: #00CC00;" align="center">Tom</td> <td style="background-color: #00adee;" align="center">99</td> <td style="background-color: #00CC00;" align="center">85</td> <td style="background-color: #00adee;" align="center">80</td> </tr> <tr> <td align="center">1</td> <td style="background-color: #00CC00;" align="center">Jone</td> <td style="background-color: #00adee;" align="center">90</td> <td style="background-color: #00CC00;" align="center">85</td> <td style="background-color: #00adee;" align="center">100</td> </tr> <tr> <td align="center">2</td> <td style="background-color: #00CC00;" align="center">Tom</td> <td style="background-color: #00adee;" align="center">99</td> <td style="background-color: #00CC00;" align="center">85</td> <td style="background-color: #00adee;" align="center">80</td> </tr> <tr> <td colspan="5" align="center"> <h2>成绩单</h2> </td> </tr> <tr> <td style='width:54pt' align="center">编号</td> <td style='width:54pt' align="center">姓名</td> <td style='width:54pt' align="center">语文</td> <td style='width:54pt' align="center">数学</td> <td style='width:54pt' align="center">英语</td> </tr> <tr> <td style='width:54pt' align="center">编号</td> <td style='width:54pt' align="center">姓名</td> <td style='width:54pt' align="center">语文</td> <td style='width:54pt' align="center">数学</td> <td style='width:54pt' align="center">英语</td> </tr> <tr> <td style='width:54pt' align="center">编号</td> <td style='width:54pt' align="center">姓名</td> <td style='width:54pt' align="center">语文</td> <td style='width:54pt' align="center">数学</td> <td style='width:54pt' align="center">英语</td> </tr> <tr> <td style='width:54pt' align="center">编号</td> <td style='width:54pt' align="center">姓名</td> <td style='width:54pt' align="center">语文</td> <td style='width:54pt' align="center">数学</td> <td style='width:54pt' align="center">英语</td> </tr> <tr> <td style='width:54pt' align="center">编号</td> <td style='width:54pt' align="center">姓名</td> <td style='width:54pt' align="center">语文</td> <td style='width:54pt' align="center">数学</td> <td style='width:54pt' align="center">英语</td> </tr> <tr> <td style='width:54pt' align="center">编号</td> <td style='width:54pt' align="center">姓名</td> <td style='width:54pt' align="center">语文</td> <td style='width:54pt' align="center">数学</td> <td style='width:54pt' align="center">英语</td> </tr> <tr> <td style='width:54pt' align="center">编号</td> <td style='width:54pt' align="center">姓名</td> <td style='width:54pt' align="center">语文</td> <td style='width:54pt' align="center">数学</td> <td style='width:54pt' align="center">英语</td> </tr> <tr> <td style='width:54pt' align="center">编号</td> <td style='width:54pt' align="center">姓名</td> <td style='width:54pt' align="center">语文</td> <td style='width:54pt' align="center">数学</td> <td style='width:54pt' align="center">英语</td> </tr> <tr> <td colspan="5" align="center"> <h2>成绩单</h2> </td> </tr> <tr> <td style='width:54pt' align="center">编号</td> <td style='width:54pt' align="center">姓名</td> <td style='width:54pt' align="center">语文</td> <td style='width:54pt' align="center">数学</td> <td style='width:54pt' align="center">英语</td> </tr> <tr> <td style='width:54pt' align="center">编号</td> <td style='width:54pt' align="center">姓名</td> <td style='width:54pt' align="center">语文</td> <td style='width:54pt' align="center">数学</td> <td style='width:54pt' align="center">英语</td> </tr> <tr> <td style='width:54pt' align="center">编号</td> <td style='width:54pt' align="center">姓名</td> <td style='width:54pt' align="center">语文</td> <td style='width:54pt' align="center">数学</td> <td style='width:54pt' align="center">英语</td> </tr> <tr> <td style='width:54pt' align="center">编号</td> <td style='width:54pt' align="center">姓名</td> <td style='width:54pt' align="center">语文</td> <td style='width:54pt' align="center">数学</td> <td style='width:54pt' align="center">英语</td> </tr> </table> <button id="btnExport">导出为Excel</button> </body> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="../js/my_tableExcel.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#btnExport").click(function () {//按钮 $("#tblExport").tableExport();//方法1需要引用my_tableExcel.js //fnExcelReport();//方法2 //tablesToExcel();//方法3 }); }); function fnExcelReport() { var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>"; var textRange; var j = 0; tab = document.getElementById('tblExport'); // 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); } function tablesToExcel() { var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>"; var textRange; var j = 0; tab = document.getElementById('tblExport'); // 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>"; 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); } </script> </html>
第四种:(jquery.table2excel.js百度网盘下载:https://pan.baidu.com/s/1jKjA2Nk)
调用方法

$("#table1").table2excel({ exclude: ".noExl", //过滤位置的 css 类名 filename: "权限清单-" + new Date().getTime() + ".xls" //文件名称 });
这4种方法也是从网上搜集来的,良心保证亲测可用,有BUG的话欢迎大家指正修改
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)