js導出Excel的方法 利用html的table表格的格式書寫想要的excel格式 獲取table的內容並組裝成一個xls格式的字元串 利用Blob對象生成一個xls格式的文件 利用a標簽的download屬性創建文件名，並下載到本地 例子： "js導出Excel" table表格內容 先寫一個正 ...
js導出Excel的方法
- 利用html的table表格的格式書寫想要的excel格式
- 獲取table的內容並組裝成一個xls格式的字元串
- 利用Blob對象生成一個xls格式的文件
- 利用a標簽的download屬性創建文件名，並下載到本地
例子：js導出Excel
table表格內容
先寫一個正常的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 media="screen">
.tableA {
border-collapse: collapse;
}
.tableA .title th{
height: 50px;
font-size: 24px;
font-family: '微軟雅黑';
font-weight: 700;
}
.tableA tr th {
border: 1px #000 solid;
height: 40px;
background: #efefef;
}
.tableA tr td {
padding: 0 40px;
border: 1px #000 solid;
height: 40px;
text-align: center;
}
.tableA .footer td {
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<table bordercolor="black" class="tableA">
<tr class="title">
<th colspan="4">學生信息</th>
</tr>
<tr>
<th>名字</th>
<th>性別</th>
<th>年齡</th>
<th>班級</th>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>19</td>
<td>1班</td>
</tr>
<tr>
<td>小黃</td>
<td>男</td>
<td>20</td>
<td>2班</td>
</tr>
<tr>
<td>老王</td>
<td>男</td>
<td>29</td>
<td>3班</td>
</tr>
<tr class="footer">
<td colspan="4">總人數：3人</td>
</tr>
</table>
</body>
</html>來看看在瀏覽器顯示的效果如下，在這裡我是給table增加了樣式的：
獲取table的內容裝成一個xls格式的字元串
接下來就是獲取table的html內容了，裡面包括標簽的class或id等。
var oHtml = document.getElementsByClassName('tableA')[0].outerHTML;這裡將table和style組成一個html，
【附上es6字元串模板鏈接[es6字元串模板][1]】
[1]:http://es6.ruanyifeng.com/#docs/string#模板字元串 "es6字元串模板"
// 這裡我是用了es6的字元串語法``和${},對es6不熟悉的同學可以去查一下。
// 有沒有發現我這裡的樣式就是和HTML上的style複製下來的，
var excelHtml = `
<html>
<head>
<meta charset='utf-8' />
<style>
.tableA {
border-collapse: collapse;
}
.tableA .title th{
height: 50px;
font-size: 24px;
font-family: '微軟雅黑';
font-weight: 700;
}
.tableA tr th {
border: 1px #000 solid;
height: 40px;
background: #efefef;
}
.tableA tr td {
padding: 0 40px;
border: 1px #000 solid;
height: 40px;
text-align: center;
}
.tableA .footer td {
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
${oHtml}
</body>
</html>
`;生成xls文件並通過a標簽下載到本地
前面的準備工作就差不多了，接下來就是將字元串轉成xls文件了，這裡主要利用Blob對象和URL.createObjectURL() 方法
- Blob對象表示不可變的類似文件對象的原始數據。Blob表示不一定是JavaScript原生形式的數據。 File 介面基於Blob，繼承了 blob的功能並將其擴展使其支持用戶系統上的文件。
- URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的視窗中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。
Blob 構造函數用法舉例（生成一個json文件）：
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
{type : 'application/json'});同樣道理利用第二個步驟的字元串生成Excel
var excelBlob = new Blob([excelHtml], {type: 'application/vnd.ms-excel'})最後一步就是通過a標簽下載到本地了，下載前可以利用a標簽的download屬性命名
// 創建一個a標簽
var oA = document.createElement('a');
// 利用URL.createObjectURL()方法為a元素生成blob URL
oA.href = URL.createObjectURL(excelBlob);
// 給文件命名
oA.download = '學生名單.xls';
// 模擬點擊
oA.click();最後生成的xls效果如下：
可以看出和瀏覽器的樣式除了涉及到px的會有偏差，其它設置都是生效的，只要微調一下就可以達到想要的效果了
ps:因為許可權問題，生成的excel的格式只能為.xls而且每次打開都會彈窗詢問。所以建議打開後另存一份excel
本文為原創作品，轉載請註明出處：http://www.cnblogs.com/suyuanli/p/7945102.html
