第一種虑灰，我認(rèn)為最好用的方法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body link="blue" vlink="purple">
<table id="print-content" border="1" cellpadding="0" cellspacing="0" style='border-collapse:collapse;table-layout:fixed;'>
<colgroup>
<col width="80 ">
<col width="80 ">
<col width="150 ">
<col width="80 ">
<col width="150 ">
<col width="80 ">
<col width="80 ">
</colgroup>
<tr height="20" style="text-align: center;font-size:18px">
<td colspan="7">會簽單</td>
</tr>
<tr height="20" style="text-align: center;font-size:14px">
<td></td>
<td colspan="2">流轉(zhuǎn)</td>
<td></td>
<td colspan="3">會議</td>
</tr>
<tr height="20" style="text-align: center;font-size:14px">
<td>名稱</td>
<td colspan="2">自動獲取</td>
<td>編號</td>
<td colspan="3">自動獲取</td>
</tr>
<tr height="20" style="text-align: center;font-size:14px">
<td>主持</td>
<td colspan="2">自動獲取</td>
<td>類型</td>
<td colspan="3">自動獲取</td>
</tr>
<tr height="20" style="text-align: center;font-size:14px">
<td>人</td>
<td colspan="2">自動獲取</td>
<td>日期</td>
<td colspan="3">自動獲取</td>
</tr>
<tr height="100" style="text-align: center;font-size:14px">
<td rowspan="5">內(nèi)容</td>
<td colspan="6" rowspan="5">自動獲取</td>
</tr>
<tr/>
<tr/>
<tr/>
<tr/>
<tr height="20" style="text-align: center;font-size:14px">
<td>備注</td>
<td colspan="6">自動獲取</td>
</tr>
<tr height="24" style="text-align: center;font-size:16px">
<td colspan="7">意見</td>
</tr>
<tr height="24" style="text-align: center;font-size:14px">
<td>序號</td>
<td>人</td>
<td>部門</td>
<td>意見</td>
<td>時間</td>
<td>節(jié)點(diǎn)</td>
<td>狀態(tài)</td>
</tr>
<tr height="20" style="text-align: center;font-size:14px">
<td>1</td>
<td>顧</td>
<td>辦公室</td>
<td>同意！</td>
<td>2018/5/14 15:21</td>
<td></td>
<td>已提交</td>
</tr>
</table>
<!-- 下載方法1.超鏈接_導(dǎo)出文件-->
<a id="print-click">超鏈接_導(dǎo)出表格</a>
<!-- 下載方法2.引入文件保存js-->
<input type="button" onclick="download()" value="函數(shù)_導(dǎo)出表格"></input>
<input type="button" onclick="printout()" value="打印"></input>
<!-- 下載方法2.引入文件保存js-->
<script type="application/javascript" src="js/FileSaver.js" ></script>
<script>
// 使用outerHTML屬性獲取整個table元素的HTML代碼（包括<table>標(biāo)簽）炫贤，然后包裝成一個完整的HTML文檔再登，設(shè)置charset為urf-8以防止中文亂碼
var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("print-content").outerHTML + "</body></html>";
// 實(shí)例化一個Blob對象尔邓，其構(gòu)造函數(shù)的第一個參數(shù)是包含文件內(nèi)容的數(shù)組，第二個參數(shù)是包含文件類型屬性的對象
var blob = new Blob([html], {
type: "application/vnd.ms-excel"
});
var a = document.getElementById("print-click");
// 利用URL.createObjectURL()方法為a元素生成blob URL
a.href = URL.createObjectURL(blob);
// 設(shè)置文件名锉矢，目前只有Chrome和FireFox支持此屬性
a.download = "會簽單.xls";
function download() {
debugger
// 使用outerHTML屬性獲取整個table元素的HTML代碼（包括<table>標(biāo)簽）梯嗽，然后包裝成一個完整的HTML文檔，設(shè)置charset為urf-8以防止中文亂碼
var html2 = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("print-content").outerHTML + "</body></html>";
// 實(shí)例化一個Blob對象沈撞，其構(gòu)造函數(shù)的第一個參數(shù)是包含文件內(nèi)容的數(shù)組慷荔，第二個參數(shù)是包含文件類型屬性的對象
var blob2 = new Blob([html2], {
type: "application/vnd.ms-excel"
});
saveAs(blob2, "應(yīng)系單.xls");
};
//打印具體實(shí)現(xiàn)代碼
function printout() {
debugger;
var newWindow;
//打開一個新的窗口
newWindow = window.open();
// 是新窗口獲得焦點(diǎn)
newWindow.focus();
//保存寫入內(nèi)容
var newContent = "<html><head><meta charset='utf-8'/><title>打印</title></head><body>"
newContent += document.getElementById("print-content").outerHTML;
newContent += "</body></html>"
// 將HTML代碼寫入新窗口中
newWindow.document.write(newContent);
newWindow.print();
// close layout stream
newWindow.document.close();
//關(guān)閉打開的臨時窗口
newWindow.close();
return false;
};
</script>
</body>
</html>
第二種
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html 表格導(dǎo)出</title>
<script language="JavaScript" type="text/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 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')">導(dǎo)出Excel方法一</button>
<button type="button" onclick="method2('tableExcel')">導(dǎo)出Excel方法二</button>
<button type="button" onclick="getXlsFromTbl('tableExcel','myDiv')">導(dǎo)出Excel方法三</button>
<button type="button" onclick="method4('tableExcel')">導(dǎo)出Excel方法四</button>
<button type="button" onclick="method5('tableExcel')">導(dǎo)出Excel方法五</button>
</div>
<div id="myDiv">
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5" align="center">html 表格導(dǎo)出道Excel</td>
</tr>
<tr>
<td>列標(biāo)題1</td>
<td>列標(biāo)題2</td>
<td>類標(biāo)題3</td>
<td>列標(biāo)題4</td>
<td>列標(biāo)題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>
