先上代碼javascript

<script type= "text/javascript" language="javascript">
var idTmr;
function getExplorer() {
var explorer = window.navigator.userAgent;
//ie
if (explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if (explorer.indexOf("Chrome") >= 0) {
return 'Chrome';
}
//Opera
else if (explorer.indexOf("Opera") >= 0) {
return 'Opera';
}
//Safari
else if (explorer.indexOf("Safari") >= 0) {
return 'Safari';
}
}
function method1(tableid,name="1.xlsx") { //整個表格拷貝到EXCEL中
if (getExplorer() == 'ie') {
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
//建立AX對象excel
var oWB = oXL.Workbooks.Add();
//獲取workbook對象
var xlsheet = oWB.Worksheets(1);
//激活當前sheet
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
//把表格中的內容移到TextRange中
sel.select;
//全選TextRange中內容
sel.execCommand( "Copy");
//複製TextRange中內容
xlsheet.Paste();
//粘貼到活動的EXCEL中
oXL.Visible = true;
//設置excel可見屬性
try {
var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
} catch (e) {
print( "Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
//xls.visible = false;
oXL.Quit();
oXL = null;
//結束excel進程，退出完成
//window.setInterval("Cleanup();",1);
idTmr = window.setInterval("Cleanup();", 1);
}
} else {
tableToExcel(tableid,name)
}
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
var tableToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,',
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></head><body><table>{table}</table></body></html>',
base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)))
},
format = function (s, c) {
return s.replace(/{(\w+)}/g,
function (m, p) {
return c[p];
})
}
return function (table, name) {
console.log(table,name)
if (!table.nodeType) table = document.getElementById(table)
var ctx = {
worksheet: name || 'Worksheet',
table: table.innerHTML
}
return;
window.location.href = uri + base64(format(template, ctx))
}
})();
</script>

$( '#export').click(function () {
method1( 'table');
})

$('#export').attr('href',uri + base64(format(template, ctx))) //解決文件無擴展名的問題

轉載自http://blog.csdn.net/sinat_15114467/article/details/51098522php

github也有寫好的插件：css

jQuery table2excel - v1 .1.1
* jQuery plugin to export an .xls file in browser from an HTML table
* https: //github.com/rainabba/jquery-table2excel

這個地址也是相關的介紹https://segmentfault.com/a/1190000000336643html

個人html實例html5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>數據</title>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
font-size: 20px;
}
body{
text-align: center;
}
.agent{
text-align: left;
}
table {
width: 1200px;
margin: 0 auto;
vertical-align: center;
font-size: 18px;
text-align: center;
border: 1px solid #ccc;
}
td,
th {
border: 1px solid #000;
overflow: hidden;
}
.kefu {
width: 70px;
}
.page {
text-align: center;
font-size: 20px;
}
.page a {
display: inline-block;
}
#export {
display: block;
text-align: center;
font-size: 20px;
}
/* 時間和日期 */
#choose {
width: 1200px;
margin: 20px auto;
text-align: center;
}
/* 對話框 */
.convBox {
position: fixed;
top: 0px;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 1200px;
height: 500px;
overflow: auto;
display: none;
background: #ccc;
border: 1px solid #000;
}
.convBox h6 {
font-size: 20px;
margin: 15px 0;
text-align: center;
}
.convBox .close {
position: absolute;
top: 8px;
right: 8px;
font-size: 20px;
}
.convBox li {
float: left;
margin: 8px 20px;
}
.clearfix:after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1;
}
.mainCon .agent,
.mainCon .client {
padding: 8px 20px;
}
.mainCon .client {
text-align: right;
background: #68c558;
}
</style>
</head>
<body>
<div id="choose">
<input type="text" class="startTm">
<input type="text" class="endTm">
<button>提交</button>
</div>
<table id="table">
<tr>
<th>編號</th>
<th>對話開始時間</th>
<th>會話結束時間</th>
<th>客戶id</th>
<th>搜索關鍵詞</th>
<th class="kefu">客服</th>
<th>客服首次響應訪客的等待時</th>
<th>訪客的消息數</th>
<th>對話內容</th>
<th>客戶地點</th>
<th>IP</th>
</tr>
</table>
<p class="page">
<a href="javascript:void(0)" class="prev">上一頁</a>
<a href="javascript:void(0)" class="next">下一頁</a>
<span></span>
</p>
<a href="javascript:void(0)" id="export" download="對話記錄.xlsx">導出對話記錄</a>
<div class="convBox">
<h6><span></span>的對話</h6>
<a href="javascript:void(0)" class="close">X</a>
<ul class="contentKey clearfix">
<li class="agent_name">
客服： <span>dfsdfsfs</span>
</li>
<li class="wait_in_secs">
對話等待時間： <span>5</span>S
</li>
<li class="visitor_ip">
IP： <span>yan</span>
</li>
<li class="visitor_location">
地點： <span>yan</span>
</li>
<li class="search_engine_kw">
搜索關鍵詞： <span>sdfsfsfsdfsfsfsgsdsg</span>
</li>
<li class="conv_start_tm">
對話開始時間： <span>sdfsfsfsdfsfsfsgsdsg</span>
</li>
<li class="conv_end_tm">
對話結束時間： <span>sdfsfsfsdfsfsfsgsdsg</span>
</li>
</ul>
<div class="mainCon clearfix">
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
var tableList= '<tr>\
<th>編號</th>\
<th>對話開始時間</th>\
<th>會話結束時間</th>\
<th>客戶id</th>\
<th>搜索關鍵詞</th>\
<th class="kefu">客服</th>\
<th>客服首次響應訪客的等待時</th>\
<th>訪客的消息數</th>\
<th>對話內容</th>\
<th>客戶地點</th>\
<th>IP</th>\
</tr>';
$( document).ready(function () {
var pageAll='';//計算總數時用的參數
var pagesize = 0; //顯示頁
var limit = 20; //每頁顯示的數目
var offset = pagesize * limit; //跳過的數目
var startTm = $('.startTm').val();
var endTm = $('.endTm').val();
//初始化時間
var startTm = getFormatDate('ymd');
var endTm = getFormatDate('ymd');
$( '.startTm').val(getFormatDate('ymd'));
$( '.endTm').val(getFormatDate('ymd'));
var data1 = {
startTm: startTm,
endTm: endTm,
offset: 0
};
//ajax請求
function ajax(data1) {
// console.log(data1)
$.ajax({
url: "php/index.php",
data: data1,
success: function (data) {
console.log(data)
var newJson = JSON.parse(data);
if (newJson.result.length < 20) {
$( '.page span').text("已是最後一頁");
} else if (newJson.result.length <= 0) {
$( '.page span').text("已是最後一頁");
return;
} else {
var Nowpage = pagesize + 1;
$( '.page span').text("當前是第" + Nowpage + "頁");
}
// addContent(newJson.result)
tableList+=addContent(newJson.result);
$( '#table').append(addContent(newJson.result));
}
})
}
function ajax2(data1) {
$.ajax({
url: "php/index.php",
data: data1,
success: function (data) {
var newJson = JSON.parse(data);
tableList+=addContent(newJson.result);
if (newJson.result.length < 20 || newJson.result.length <= 0) {
// console.log(tableList)
var dateN=(new Date()).toLocaleString();
// console.log(dateN)
// return;
method1(tableList,dateN);
// return tableList;
} else {
allrecord();
}
}
})
}
//調出全部的記錄
function allrecord(){
pageAll++;
var offset = pageAll * limit; //跳過的數目
var startTm = $('.startTm').val();
var endTm = $('.endTm').val();
var data1 = {
startTm: startTm,
endTm: endTm,
offset: offset
}
ajax2(data1);
}
ajax(data1);
//插入對話內容
function addContent(rs) {
// console.log(rs)
var arr = [];
var length = rs.length;
for (var i = 0; i < length; i++) {
if(!rs[i]){continue;}
arr.push( '<tr>');
arr.push( '<td>' + i + '</td>');
arr.push( '<td>' + rs[i].conv_start_tm + '</td>');
arr.push( '<td>' + rs[i].conv_end_tm + '</td>');
arr.push( '<td>' + rs[i].client_info.visitor_name + '</td>');
arr.push( '<td>' + rs[i].search_engine_kw + '</td>');
arr.push( '<td>' + rs[i].agent_name + '</td>');
arr.push( '<td>' + rs[i].wait_in_secs + '</td>');
arr.push( '<td>' + rs[i].conv_visitor_msg_count + '</td>');
if(rs[i].conv_visitor_msg_count>0){
let con = '';
let conLen = rs[i].conv_content.length;
for(let j=0;j<conLen;j++){
con+=rs[i].conv_content[j].from+rs[i].conv_content[j].timestamp+rs[i].conv_content[j].content;
}
arr.push( '<td class="convId">' + con + '<span>' + rs[i].conv_id + '</span></td>');
} else{
arr.push( '<td class="convId">' + '點擊顯示內容<span>' + rs[i].conv_id + '</span></td>');
}
arr.push( '<td>' + rs[i].visitor_location + '</td>');
arr.push( '<td>'+rs[i].visitor_ip+'</td>');
arr.push( '</tr>');
}
// tableList+=arr.join('')
// $('#table').append(arr.join(''));
return arr.join('');
}
$( '.prev').click(function () {
$( "#table tr").not($("#table tr:first")).remove();
pagesize = (--pagesize < 0) ? 0 : pagesize;
offset = pagesize * limit; //跳過的數目
startTm = $( '.startTm').val();
endTm = $( '.endTm').val();
var data1 = {
startTm: startTm,
endTm: endTm,
offset: offset
}
ajax(data1);
})
$( '.next').click(function () {
$( "#table tr").not($("#table tr:first")).remove();
if ($('.page span').text() == '已是最後一頁') {
return false;
}
pagesize = (++pagesize < 0) ? 0 : pagesize;
// console.log(pagesize)
var offset = pagesize * limit; //跳過的數目
var startTm = $('.startTm').val();
var endTm = $('.endTm').val();
var data1 = {
startTm: startTm,
endTm: endTm,
offset: offset
}
ajax(data1);
})
// 日期選擇表單
$( '#choose button').click(function () {
pagesize= 0;
var startTm = $('.startTm').val();
var endTm = $('.endTm').val();
var data1 = {
startTm: startTm,
endTm: endTm,
offset: 0
}
$( "#table tr").not($("#table tr:first")).remove();
ajax(data1);
});
// 當前時間的函數
/*
* @param param string 肯定時間的顯示格式 'ymd' => 年-月-日
* 其它 => 年-月-日+時：分：秒
* @param num num +1表明後一天，-1表明前一天
*
**/
function getFormatDate(param, num = 0) {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var seperator3 = '+';
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate() + num;
var h = date.getHours();
var i = date.getMinutes();
var s = date.getSeconds();
if (m >= 1 && m <= 9) {
m = "0" + m;
}
d = d <= 0 ? 1 : d;
if (d >= 0 && d <= 9) {
d = "0" + d;
}
if (param = 'ymd') {
var currentdate = y + seperator1 + m + seperator1 + d;
} else {
var currentdate = y + seperator1 + m + seperator1 + d +
seperator3 + h + seperator2 + i +
seperator2 + s;
}
return currentdate;
}
// 顯示聊天內容
$( document).on('click', '.convId', function () {
var convId = $(this).find('span').text();
var data1 = {
conv_id: convId
}
$.ajax({
url: "php/conv.php",
data: data1,
success: function (data) {
var newJson = (new Function("", "return " + data))(data).result;
// console.log(newJson)
$( '.convBox h6 span').text(convId);
$( '.convBox .agent_name span').text(newJson.agent_name);
$( '.convBox .wait_in_secs span').text(newJson.wait_in_secs);
$( '.convBox .visitor_ip span').text(newJson.visitor_ip);
$( '.convBox .visitor_location span').text(newJson.visitor_location);
$( '.convBox .search_engine_kw span').text(newJson.search_engine_kw);
$( '.convBox .conv_end_tm span').text(newJson.conv_end_tm);
$( '.convBox .conv_start_tm span').text(newJson.conv_start_tm);
$( '.convBox .visitor_location span').text(newJson.visitor_location);
let convLen = newJson.conv_content.length;
let conv_content = [];
// console.log(convLen)
for (let j = 0; j < convLen; j++) {
// conv_content.push(111)
conv_content.push( '<div class="' + newJson.conv_content[j].from +
'"><p>' + newJson.conv_content[j].timestamp + '</p>' +
newJson.conv_content[j].content + '</div>');
}
// console.log(conv_content)
$( '.convBox .mainCon').html(conv_content.join(''));
}
});
$( '.convBox').show();
})
$( document).on('click', '.convBox .close', function () {
$( '.convBox').hide();
});
// 打印
$( '#export').click(function () {
if ($('.page span').text() == '已是最後一頁') {
// method1(tableList,'聊天數據');
method1(tableList, '1.xlsx');
return false;
}
pageAll =pagesize;
allrecord();
// method1(allrecord(),'美洽對話');
})
});
</script>
<script type="text/javascript" language="javascript">
var idTmr;
function getExplorer() {
var explorer = window.navigator.userAgent;
//ie
if (explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if (explorer.indexOf("Chrome") >= 0) {
return 'Chrome';
}
//Opera
else if (explorer.indexOf("Opera") >= 0) {
return 'Opera';
}
//Safari
else if (explorer.indexOf("Safari") >= 0) {
return 'Safari';
}
}
function method1(tableid,name="1.xlsx") { //整個表格拷貝到EXCEL中
if (getExplorer() == 'ie') {
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
//建立AX對象excel
var oWB = oXL.Workbooks.Add();
//獲取workbook對象
var xlsheet = oWB.Worksheets(1);
//激活當前sheet
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
//把表格中的內容移到TextRange中
sel.select;
//全選TextRange中內容
sel.execCommand( "Copy");
//複製TextRange中內容
xlsheet.Paste();
//粘貼到活動的EXCEL中
oXL.Visible = true;
//設置excel可見屬性
try {
var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
} catch (e) {
print( "Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
//xls.visible = false;
oXL.Quit();
oXL = null;
//結束excel進程，退出完成
//window.setInterval("Cleanup();",1);
idTmr = window.setInterval("Cleanup();", 1);
}
} else {
tableToExcel(tableid,name)
}
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,', 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></head><body><table>{table}</table></body></html>'
, base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)))
}
, format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
})
}
return function(table, name) {
var ctx = {worksheet:name , table:table}
// console.log(uri + base64(format(template, ctx)))
// return;
// $('#export').attr('href',uri + base64(format(template, ctx)))
window.location.href = uri + base64(format(template, ctx));
}
})()
</script>
</body>
</html>

https://blog.csdn.net/qiphon3650/article/details/77921087

java

如今各大瀏覽器基本都支持data協議，因此咱們可使用該協議去將網頁中的table轉化爲excel下載下來node

對html 進行base64編碼處理
編碼後的html內容增長前綴 data:application/vnd.ms-excel; ，便可使瀏覽器將其中的數據當作excel來處理，瀏覽器將提示下載或打開excel文件
代碼小例：

<html> <head> <meta http-equiv="content-Type" content="text/html;charset=utf-8"/> <script type="text/javascript"> function base64 (content) { return window.btoa(unescape(encodeURIComponent(content))); } function exportOffice(tableID){ var type = 'doc'; var table = document.getElementById(tableID); var excelContent = table.innerHTML; var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:"+type+"' xmlns='http://www.w3.org/TR/REC-html40'>"; excelFile += "<head>"; excelFile += "<!--[if gte mso 9]>"; excelFile += "<xml>"; excelFile += "<x:ExcelWorkbook>"; excelFile += "<x:ExcelWorksheets>"; excelFile += "<x:ExcelWorksheet>"; excelFile += "<x:Name>"; excelFile += "{worksheet}"; excelFile += "</x:Name>"; excelFile += "<x:WorksheetOptions>"; excelFile += "<x:DisplayGridlines/>"; excelFile += "</x:WorksheetOptions>"; excelFile += "</x:ExcelWorksheet>"; excelFile += "</x:ExcelWorksheets>"; excelFile += "</x:ExcelWorkbook>"; excelFile += "</xml>"; excelFile += "<![endif]-->"; excelFile += "</head>"; excelFile += "<body>"; excelFile += excelContent; excelFile += "</body>"; excelFile += "</html>"; var base64data = "base64," + base64(excelFile); switch(type){ case 'excel': window.open('data:application/vnd.ms-'+type+';'+base64data); break; case 'powerpoint': window.open('data:application/vnd.ms-'+type+';'+base64data); break; } } </script> </head> <body> <table id="targetTable"> <tr align="center"> <th>名次</th> <th>姓名</th> <th>成績</th> </tr> <tr align="center"> <td>1</td> <td>小明</td> <td>100</td> </tr> <tr align="center"> <td>2</td> <td>小紅</td> <td>95.5</td> </tr> </table> </br> <input id="Button1" type="button" value="導出" onclick="exportOffice('targetTable')" /> </body> </html>

連接：https://www.jianshu.com/p/a3642877d590

這五種方法前四種方法只支持IE瀏覽器，最後一個方法支持當前主流的瀏覽器（火狐，IE，Chrome，Opera，Safari）

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html 表格導出道</title>
<script language="JavaScript" type="text/javascript">
//第一種方法
function method1(tableid) {
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var oSheet = oWB.ActiveSheet;
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
sel.select();
sel.execCommand( "Copy");
oSheet.Paste();
oXL.Visible = true;
}
//第二種方法
function method2(tableid)
{
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var oSheet = oWB.ActiveSheet;
var Lenr = curTbl.rows.length;
for (i = 0; i < Lenr; i++)
{ var Lenc = curTbl.rows(i).cells.length;
for (j = 0; j < Lenc; j++)
{
oSheet.Cells(i + 1, j + 1).value = curTbl.rows(i).cells(j).innerText;
}
}
oXL.Visible = true;
}
//第三種方法
function getXlsFromTbl(inTblId, inWindow){
try {
var allStr = "";
var curStr = "";
if (inTblId != null && inTblId != "" && inTblId != "null") {
curStr = getTblData(inTblId, inWindow);
}
if (curStr != null) {
allStr += curStr;
}
else {
alert( "你要導出的表不存在");
return;
}
var fileName = getExcelFileName();
doFileExport(fileName, allStr);
}
catch(e) {
alert( "導出發生異常:" + e.name + "->" + e.description + "!");
}
}
function getTblData(inTbl, inWindow) {
var rows = 0;
var tblDocument = document;
if (!!inWindow && inWindow != "") {
if (!document.all(inWindow)) {
return null;
}
else {
tblDocument = eval(inWindow).document;
}
}
var curTbl = tblDocument.getElementById(inTbl);
var outStr = "";
if (curTbl != null) {
for (var j = 0; j < curTbl.rows.length; j++) {
for (var i = 0; i < curTbl.rows[j].cells.length; i++) {
if (i == 0 && rows > 0) {
outStr += " t";
rows -= 1;
}
outStr += curTbl.rows[j].cells[i].innerText + "t";
if (curTbl.rows[j].cells[i].colSpan > 1) {
for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {
outStr += " t";
}
}
if (i == 0) {
if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {
rows = curTbl.rows[j].cells[i].rowSpan - 1;
}
}
}
outStr += "rn";
}
}
else {
outStr = null;
alert(inTbl + "不存在 !");
}
return outStr;
}
function getExcelFileName() {
var d = new Date();
var curYear = d.getYear();
var curMonth = "" + (d.getMonth() + 1);
var curDate = "" + d.getDate();
var curHour = "" + d.getHours();
var curMinute = "" + d.getMinutes();
var curSecond = "" + d.getSeconds();
if (curMonth.length == 1) {
curMonth = "0" + curMonth;
}
if (curDate.length == 1) {
curDate = "0" + curDate;
}
if (curHour.length == 1) {
curHour = "0" + curHour;
}
if (curMinute.length == 1) {
curMinute = "0" + curMinute;
}
if (curSecond.length == 1) {
curSecond = "0" + curSecond;
}
var fileName = "table" + "_" + curYear + curMonth + curDate + "_"
+ curHour + curMinute + curSecond + ".csv";
return fileName;
}
function doFileExport(inName, inStr) {
var xlsWin = null;
if (!!document.all("glbHideFrm")) {
xlsWin = glbHideFrm;
}
else {
var width = 6;
var height = 4;
var openPara = "left=" + (window.screen.width / 2 - width / 2)
+ ",top=" + (window.screen.height / 2 - height / 2)
+ ",scrollbars=no,width=" + width + ",height=" + height;
xlsWin = window.open("", "_blank", openPara);
}
xlsWin.document.write(inStr);
xlsWin.document.close();
xlsWin.document.execCommand( 'Saveas', true, inName);
xlsWin.close();
}
//第四種
function method4(tableid){
var curTbl = document.getElementById(tableid);
var oXL;
try{
oXL = new ActiveXObject("Excel.Application"); //建立AX對象excel
} catch(e){
alert( "沒法啓動Excel!\n\n若是您確信您的電腦中已經安裝了Excel，"+"那麼請調整IE的安全級別。\n\n具體操做：\n\n"+"工具 → Internet選項 → 安全 → 自定義級別 → 對沒有標記爲安全的ActiveX進行初始化和腳本運行 → 啓用");
return false;
}
var oWB = oXL.Workbooks.Add(); //獲取workbook對象
var oSheet = oWB.ActiveSheet;//激活當前sheet
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl); //把表格中的內容移到TextRange中
sel.select(); //全選TextRange中內容
sel.execCommand( "Copy");//複製TextRange中內容
oSheet.Paste(); //粘貼到活動的EXCEL中
oXL.Visible = true; //設置excel可見屬性
var fname = oXL.Application.GetSaveAsFilename("將table導出到excel.xls", "Excel Spreadsheets (*.xls), *.xls");
oWB.SaveAs(fname);
oWB.Close();
oXL.Quit();
}
//第五種方法
var idTmr;
function getExplorer() {
var explorer = window.navigator.userAgent ;
//ie
if (explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
return 'Chrome';
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
return 'Opera';
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
return 'Safari';
}
}
function method5(tableid) {
if(getExplorer()=='ie')
{
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var xlsheet = oWB.Worksheets(1);
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
sel.select();
sel.execCommand( "Copy");
xlsheet.Paste();
oXL.Visible = true;
try {
var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
} catch (e) {
print( "Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
oXL.Quit();
oXL = null;
idTmr = window.setInterval("Cleanup();", 1);
}
}
else
{
tableToExcel(tableid)
}
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',
base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
format = function(s, c) {
return s.replace(/{(\w+)}/g,
function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()
</script>
</head>
<body>
<div >
<button type="button" onclick="method1('tableExcel')">導出Excel方法一</button>
<button type="button" onclick="method2('tableExcel')">導出Excel方法二</button>
<button type="button" onclick="getXlsFromTbl('tableExcel','myDiv')">導出Excel方法三</button>
<button type="button" onclick="method4('tableExcel')">導出Excel方法四</button>
<button type="button" onclick="method5('tableExcel')">導出Excel方法五</button>
</div>
<div id="myDiv">
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5" align="center">html 表格導出道Excel</td>
</tr>
<tr>
<td>列標題1</td>
<td>列標題2</td>
<td>類標題3</td>
<td>列標題4</td>
<td>列標題5</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
<td>eee</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
</tr>
<tr>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
</tr>
</table>
</div>
</body>
</html>

今天上來發現，好多人，會遇到文件名，格式等問題。這裏添加一種方法。兼容性我沒有測試，你們能夠試下，不過須要利用JQ直接貼代碼了。jquery 引入文件在http://download.csdn.net/download/aa122273328/10103711 注意必定要引jquery-3.2.1.min.js，jquery.table2excel.js對應的文件。jquery-3.2.1.min.js這個看你對應的文件版本，不重要。若有問題，歡迎批評指導。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html 表格導出道</title>
<script src="js/vendor/jquery-3.2.1.min.js"></script>
<script src="jquery.table2excel.js"></script>
<script language="JavaScript" type="text/javascript">
$( document).ready(function () {
$( "#btnExport").click(function () {
$( "#tableExcel").table2excel({
exclude : ".noExl", //過濾位置的 css 類名
filename : "你想說啥" + new Date().getTime() + ".xls", //文件名稱
name: "Excel Document Name.xlsx",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
});
});
</script>
</head>
<body>
<div >
<button type="button" id="btnExport" onclick="method5('tableExcel')">導出Excel</button>
</div>
<div id="myDiv">
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5" align="center">html 表格導出道Excel</td>
</tr>
<tr>
<td>列標題1</td>
<td>列標題2</td>
<td>類標題3</td>
<td>列標題4</td>
<td>列標題5</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
<td>eee</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
</tr>
<tr>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
</tr>
</table>
</div>
</body>
</html>

[html] view plain copy

https://blog.csdn.net/aa122273328/article/details/50388673

有時候咱們須要把網頁中的數據導出excel格式來，那麼咱們用下面兩種方法能夠完成。jquery

第一種.自寫代碼

<html> <head> <meta http-equiv="content-Type" content="text/html;charset=utf-8"/> <script type="text/javascript"> function base64 (content) { return window.btoa(unescape(encodeURIComponent(content))); } /* *@tableId: table的Id *@fileName: 要生成excel文件的名字（不包括後綴，可隨意填寫） */ function tableToExcel(tableID,fileName){ var table = document.getElementById(tableID); var excelContent = table.innerHTML; var excelFile = "<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'>"; excelFile += "<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>"; excelFile += "<body><table>"; excelFile += excelContent; excelFile += "</table></body>"; excelFile += "</html>"; var link = "data:application/vnd.ms-excel;base64," + base64(excelFile); var a = document.createElement("a"); a.download = fileName+".xlsx"; a.href = link; a.click(); } </script> </head> <body> <button type="button" onclick="tableToExcel('item','data')">導出</button> <table id="item"> <tr> <th>編號</th> <th>姓名</th> <th>年齡</th> </tr> <tr> <td>1</td> <td>小明</td> <td>19</td> </tr> <tr> <td>2</td> <td>小芳</td> <td>20</td> </tr> <tr> <td>3</td> <td>大軍</td> <td>22</td> </tr> </table> </body> </html>

**git

第二種.jquery插件

**
首先要先下載一個jquery.table2excel.js插件(網上搜搜)，而後使用。github

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>table2excel</title> <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <header class="jq22-header"> <h4>table2excel-可將HTML表格內容導出到Excel中的jQuery插件 <span>jQuery Plugin to export HTML tabled to Excel Spreadsheet Compatible Files</span></h4> </header> <section class="jq22-container"> <div class="container" style="padding:30px 0"> <div class="row"> <div class="md-col-8"> <div class="table-responsive table2excel" data-tableName="Test Table 1"> <table class="table table-striped table-bordered table-hover"> <thead> <tr class="noExl"> <td class="danger">帶<code>noExl</code>class的行不會被輸出到excel中</td> <td class="danger">帶<code>noExl</code>class的行不會被輸出到excel中</td> </tr> <tr> <td class="success">這一行會被導出到excel中</td> <td class="success">這一行會被導出到excel中</td> </tr> </thead> <tbody> <tr> <td>單元格1-1</td> <td>單元格1-2</td> </tr> <tr> <td>單元格2-1</td> <td>單元格2-2</td> </tr> <tr> <td>單元格3-1</td> <td>單元格3-2</td> </tr> </tbody> <tfoot> <tr> <td colspan="2" class="warning">合併2個單元格</td> </tr> </tfoot> </table> </div> </div> </div> <button id="btn" class="btn btn-primary">點擊這裏將表格內容導出到excel中</button> </div> </section> <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script> <script src="dist/jquery.table2excel.js"></script> <script> $(function() { $("#btn").click(function(){ $(".table2excel").table2excel({ exclude: ".noExl", name: "Excel Document Name", filename: "myFileName", exclude_img: true, exclude_links: true, exclude_inputs: true }); }); }); </script> </body> </html>

詳情請瀏覽：html中table導出Excel

https://blog.csdn.net/jesslu/article/details/77866040

jquery-table2excel是一款能夠將HTML表格的內容導出到微軟Excel電子表格中的jQuery插件。該插件能夠根據你的須要導出表格中的內容，不須要的行能夠不導出。它文件體積小，使用很是方便。

jquery-table2excel插件的github地址爲：https://github.com/rainabba/jquery-table2excel

注意導出的Excel文件的格式，默認導出爲.xlsx格式的excel文件，須要excel2010以上的版本才能打開，若是是使用低版本的excel，能夠手動將文件擴展名修改成.xls。

使用方法

使用table2excel表格插件須要在頁面中引入jquery和jquery.table2excel.js文件。

<script type= "text/javascript" src="js/jquery.min.js"></script>
<script type= "text/javascript" src="js/jquery.table2excel.js"></script>

若是表格中的某一行不須要導出到Excel中，能夠爲這一行添加.noExl class類，該class類會在插件初始化時經過參數被指定爲不被導出的數據。

初始化插件

在頁面DOM元素加載中完畢以後，能夠經過下面的方法來初始化table2excel插件。

$( "#table2excel").table2excel({
// 不被導出的表格行的CSS class類
exclude: ".noExl",
// 導出的Excel文檔的名稱
name: "Excel Document Name",
// Excel文件的名稱
filename: "myExcelTable"
});

配置參數

table2excel插件的可用配置參數有：

exclude：不被導出的表格行的CSS class類。
name：導出的Excel文檔的名稱。
filename：Excel文件的名稱。
exclude_img：是否導出圖片。
exclude_links：是否導出超連接
exclude_inputs：是否導出輸入框中的內容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="datatable" class="xd_table_sj">
<tbody>
<tr>
<td><div align="center" id="titlelable">起始時間</div></td>
<td><div align="center" id="titlelable">通訊地點</div></td>
<td><div align="center" id="titlelable">上網方式</div></td>
<td><div align="center" id="titlelable">總時長</div></td>
<td><div align="center" id="titlelable">總流量</div></td>
<td><div align="center" id="titlelable">套餐優惠</div></td>
<td><div align="center" id="titlelable">優惠或減免</div></td>
<td><div align="center" id="titlelable">通訊費</div></td>
<td><div align="center" id="titlelable">終端類型</div></td>
</tr>
<tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 01:57:05</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.001</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 01:58:55</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.007</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 07:00:00</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.001</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 07:23:19</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.084</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 08:16:31</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.001</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 08:16:39</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.06</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 08:28:44</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.002</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 08:34:50</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.259</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 08:34:50</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>1.26</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 09:54:53</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>1.357</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 09:56:29</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.003</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 09:56:31</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.009</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 09:56:33</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.583</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 10:27:16</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.001</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 10:28:58</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.004</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 12:44:12</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.001</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 12:45:41</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.411</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 12:57:42</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.024</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 12:57:50</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.009</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 12:57:52</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.007</td>
<td>校園4G套餐-400M國內流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
</tbody>
</table>
<button>導出EXCEL</button>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/jquery.table2excel.js"></script>
<script>
$( 'button').click(function(){
console.log(1)
$( "#datatable").table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
})
</script>
</body>
</html>

https://blog.csdn.net/hefeng6500/article/details/78449436

HTML table導出到Excel中的解決辦法

第一部分：html+js

1.須要使用的表格數據（先不考慮動態生成的table）

<table class="table tableStyles" id="tables">
        <caption>不正經的統計表</caption><!--能夠生成表格的標題-->
        <thead>
            <tr>
                <th>品牌</th>
                <th>門店</th>
                <th>本週回訪</th>
                <th>本月回訪</th>
                <th>總回訪</th>
                <th>本週成交數</th>
                <th>本月成交數</th>
                <th>總成交數</th>
                <th>異常量</th>
                <th>成交轉化率</th>
                <th>經手人/th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">華爲</td>
                <td>華爲深圳店</td>
                <td>20</td>
                <td>80</td>
                <td>500</td>
                <td>1</td>
                <td>3</td>
                <td>20</td>
                <td>1</td>
                <td>4.0%</td>
                <td>黃生</td>
            </tr>
            <tr>
                <td>華爲東莞店</td>
                <td>20</td>
                <td>80</td>
                <td>500</td>
                <td>1</td>
                <td>3</td>
                <td>20</td>
                <td>1</td>
                <td>4.0%</td>
                <td>黃生</td>
            </tr>
            <tr>
                <td>華爲佛山店</td>
                <td>20</td>
                <td>80</td>
                <td>500</td>
                <td>1</td>
                <td>3</td>
                <td>20</td>
                <td>1</td>
                <td>4.0%</td>
                <td>黃生</td>
            </tr>
            <tr>
                <td rowspan="3">小米</td>
                <td>米家深圳店</td>
                <td>20</td>
                <td>80</td>
                <td>500</td>
                <td>1</td>
                <td>3</td>
                <td>20</td>
                <td>1</td>
                <td>4.0%</td>
                <td>林生</td>
            </tr>
        </tbody>
    </table>

2.Js代碼

①利用html5的download屬性，點擊下載該文件

<a id="dlink"  style="display:none;"></a>
<input type="button" onclick="tableToExcel('tables', 'name', 'myfile.xls')" value="Export to Excel">

<script type="text/javascript">
        var tableToExcel = (function () {
            var uri = 'data:application/vnd.ms-excel;base64,',
                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>',
                base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
                format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };
            return function (table, name, filename) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
    
                document.getElementById("dlink").href = uri + base64(format(template, ctx));
                document.getElementById("dlink").download = filename;
                document.getElementById("dlink").click();
            }
        })()
    </script>

②建立ActiveXObject對象複製到表格中

<input id="Button1" type="button" value="導出EXCEL" onclick="javascript:excels('tables')" />

<script type="text/javascript">
        var timer;
        function getExplorer(){//獲取瀏覽器
            var explorer=window.navigator.userAgent;
            if(explorer.indexOf("MSIE") >= 0|| (explorer.indexOf("Windows NT 6.1;") >= 0 && explorer.indexOf("Trident/7.0;") >= 0)){
                return 'ie';
            }else if (explorer.indexOf("Firefox") >= 0) {
                return 'Firefox';
            }else if(explorer.indexOf("Chrome") >= 0){
                return 'Chrome';
            }else if(explorer.indexOf("Opera") >= 0){
                return 'Opera';
            }else if(explorer.indexOf("Safari") >= 0){
                return 'Safari';
            }
        }
        function excels(table){
            if(getExplorer()=='ie'){
                var curTbl = document.getElementById(table);
                var oXl=new ActiveXObject("Excel.Application");//建立AX對象excel 
                var oWB = oXL.Workbooks.Add();//獲取workbook對象
                var xlsheet = oWB.Worksheets(1);//激活當前sheet
                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);//把表格中的內容移到TextRange中 
                sel.select;//全選TextRange中內容
                sel.execCommand("Copy");//複製TextRange中內容
                xlsheet.Paste();//粘貼到活動的EXCEL中
                oXL.Visible = true;//設置excel可見屬性
                try{
                    var filename = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
                }catch(e){
                    window.print("Nested catch caught " + e);
                }finally{
                    oWB.SaveAs(filename);
                    oWB.Close(savechanges = false);
                    oXL.Quit();
                    oXL = null;//結束excel進程，退出完成
                    timer = window.setInterval("Cleanup();", 1);
                }
            }else{
                tableToExcel("tables");
            }
        }
        function Cleanup(){
            window.clearInterval(timer);
            CollectGarbage();//CollectGarbage,是IE的一個特有屬性,用於釋放內存的
        }
        var tableToExcel=(function(){
            var uri = 'data:application/vnd.ms-excel;base64,',
                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>',
                base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
                format = function(s, c) {
                    return s.replace(/{(\w+)}/g,
                    function(m, p) { return c[p]; }) };
            return function(table, name) {
                if (!table.nodeType) table = document.getElementById(table);
                var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
                window.location.href = uri + base64(format(template, ctx))
            }
        })();
    </script>

第二部分：分析測試
測試環境（谷歌，火狐，IE，EDGE，QQ瀏覽器）

①.真正起到做用的是a標籤的屬性，input按鈕只是起到了一個過渡到download屬性的做用；

其中有編碼解碼，須要注意中文亂碼狀況；

測試只有谷歌和火狐起做用，且只有谷歌下載的文件名是「下載.xls」，火狐的文件名像是編碼後的~

　雙核瀏覽器固然也只有chrome內核下有效果~~

　我比較喜歡的一點，html中合併的單元格導出到excel中繼續保留合併效果~~

谷歌截圖：

火狐截圖:

②.主要是利用AX對象建立excel

　　在IE下不行，會提示錯誤「不能使用啥對象什麼什麼」

　　難道是須要安裝Office軟件？沒試過。。

這幾個瀏覽器中，谷歌的體驗稍微好一點，還能夠本身帶個命名什麼的~~，其餘體驗都不是很友好~~

還有其餘的問題是我繼續須要想的，表格內容分頁狀況導出？篩選條件後導出所有？等等等~

附上源碼註釋地址：https://github.com/Chuyue0/javascript-demo/blob/master/tableExporeExcel.html

開發過程當中有不少預料不到的事，繼續加油吧！

~~~~~~~~~~~~剩到最後的解決辦法是利用插件~~~~~~~~~~~~

好比github上的

1020 Star：https://github.com/kayalshri/tableExport.jquery.plugin

270 Star：https://github.com/clarketm/TableExport

159 Star：https://github.com/huanz/tableExport

說明一下，星星多的插件是有base64編碼，因此還額外須要js腳本！

我的比較喜歡最少星星的庫，感受明瞭清晰，能夠按需加載~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

js實現table導出Excel，保留table樣式

瀏覽器環境：谷歌瀏覽器

1.在導出Excel的時候，保存table的樣式，有2種方法，①是在table的行內寫style樣式，②是在模板裏面添加樣式

2.第一種方式：行內添加樣式

<td style="font-size: 18px">公司一</td>

效果：

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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 style="font-size: 18px">公司一</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;' +
            '' +
            '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>

3.第二種方式：在模板裏面裏面添加樣式

在這裏面添加的樣式excel就能找到和識別了

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;' +
            '' +
            'color: #ffffff;' +
            ' }' +
            '</style>' +
            '</head><body ><table class="excelTable">{table}</table></body></html>';

完整代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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;' +
            '' +
            '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格式的呢！導出的並非excel格式
！你是否是下載的時候沒有設置文件的後綴?

a標籤的download="table導出Exce.xls"
如<a download="table導出Exce.xls" id="excelOut" href="#">table導出Excel</a>

問題一若是沒有安裝 office 導出來

安裝 office 就默認指定了後綴

問題二文件格式和擴展名不匹配。文件可能已損壞或不安全除非您信任其來源

沒解決不影響功能

office 打開報文件格式和擴展名不匹配。文件可能已損壞或不安全除非您信任來源不然請勿打開，是否仍要打開它

html table表格導出excel的方法 html5 table導出Excel HTML用JS導出Excel的五種方法 html中table導出Excel 前端開發 將table內容...