HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .receive table{ width: 600px; } .receive table th,.receive table td{ width: 140px; text-align: center; height: 30px; line-height: 30px; } button{ width: 100px; height: 30px; line-height: 30px; text-align: center; background: pink; color: #fff; border-radius: 6px; outline: none; border: none; } </style> </head> <body> <button>保存至本地</button> <div class="receive"> <table id="table"> <tr> <th>单位</th> <th>支部</th> <th>姓名</th> <th>手机号</th> </tr> <tr> <td>小虎豹</td> <td>支部名称1</td> <td>姓名1</td> <td>18463580322</td> </tr> <tr> <td>单位名称2</td> <td>支部名称2</td> <td>姓名2</td> <td>18463587551</td> </tr> <tr> <td>单位名称3</td> <td>支部名称3</td> <td>姓名3</td> <td>18712830270</td> </tr> <tr> <td>单位名称4</td> <td>支部名称4</td> <td>姓名4</td> <td>18712830270</td> </tr> <tr> <td>单位名称5</td> <td>支部名称5</td> <td>姓名5</td> <td>18712830270</td> </tr> <tr> <td>单位名称3</td> <td>支部名称3</td> <td>姓名3</td> <td>18712830270</td> </tr> <tr> <td>单位名称4</td> <td>支部名称4</td> <td>姓名4</td> <td>18712830270</td> </tr> <tr> <td>单位名称5</td> <td>支部名称5</td> <td>姓名5</td> <td>18712830270</td> </tr> </table> </div> <script src="excel.js"></script> <script> var btn=document.getElementsByTagName('button')[0]; btn.onclick=function(){ exportExcel('table','党员领取详情'); } </script> </body> </html>
JS
function inArray(target, arr) { // 不适用于引用数据类型 return arr.some(function(elem, index) { if (target === elem) { return true; } }) } // row ,line : array, 不需要数据的行列值，0或undefined为全选 function exportExcel(tableID,fileName,row,line){ var agent = navigator.userAgent.toLowerCase(); var isIE = /(msies|trident.*rv:)([w.]+)/.test(agent); if (isIE) { alert("暂不支持IE内核的浏览器"); } else { var table = document.getElementById(tableID); var oTh = table.getElementsByTagName('th'); var data = []; data[0] = []; for(var i = 0; i < oTh.length; i++) { // 标题th强制导出 if(line && inArray(i, line)) { continue; } data[0].push(oTh[i].innerHTML) } var oTr = table.getElementsByTagName('tr'); for(var i = 1; i < oTr.length; i++) { if(row && inArray(i,row)) { continue; } var arr = []; var oTd = oTr[i].getElementsByTagName('td'); for (var j = 0; j < oTd.length; j++) { if(line && inArray(j, line)) { continue; } arr.push(oTd[j].innerHTML.replace(' ',' ')); } data.push(arr); } var str = ''; data.forEach(function(arr, index){ str += arr.toString() + ' '; }) str = encodeURIComponent(str); //解决换行符无法识别问题 var url = 'data:text/txt;charset=utf-8,ufeff'+ str; var downloadLink = document.createElement("a"); downloadLink.href = url; downloadLink.download = fileName+".csv"; document.body.appendChild(downloadLink); downloadLink.click(); downloadLink.remove(); } }