原生js將table導(dǎo)出為Excel（json字符串導(dǎo)出Excel同理）
效果示意圖：
導(dǎo)出Excel.gif
以下為完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>js導(dǎo)出ExcelDemo</title>
</head>
<body>
<div id="demo">
<table border="1px" cellspacing="0" cellpadding="0">
<thead>
<th>第一列</th>
<th>第二列</th>
</thead>
<tbody>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</tbody>
</table>
</div>
<button id="exportBtn">導(dǎo)出Excel</button>
<script type="text/javascript">
document.getElementById("exportBtn").onclick = function(){
var table = document.getElementById("demo").innerHTML;//獲取table模板
exporExcel("導(dǎo)出Excel",table);
}
/**
* 注：如果想設(shè)置單元格格式，比如數(shù)字太多，默認(rèn)導(dǎo)出會(huì)按科學(xué)計(jì)數(shù)法轉(zhuǎn)換，這個(gè)時(shí)候要寫(xiě)成文本格式
* 可以這樣使用 在td 上 使用style；如：<td style='mso-number-format:"@";'>第一行 </td>
* style='mso-number-format:"@";' 轉(zhuǎn)文本
* **/
/**
* @params: FileName:導(dǎo)出Excel的文件名稱(chēng)，excel:需要導(dǎo)出的table
* 如果沒(méi)有table列表，只有json數(shù)據(jù)的話，將json數(shù)據(jù)拼接成table字符串模板即可
* **/
function exporExcel(FileName,excel){
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 += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
excelFile += '; charset=UTF-8">';
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 += excel;
excelFile += "</body>";
excelFile += "</html>";
var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = FileName ; //格式默認(rèn)為.xls
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>