js導出excel

時間 2019-11-20

原文原文鏈接

```<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html 表格導出Excel</title>
</head>
<body>
<div >
<button onclick="method('tableExcel')">表格導出Excel</button>
<button onclick="jsonMethod()">json導出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>
<script language="JavaScript" type="text/javascript">
//---------------------------將JSON導出Excel---------------------------//javascript

//須要進行數據轉換，html

// 咱們使用ajax請求到的數據前端

var data = [{name:"hjm100",duty:'管理員',opensource:'http://git.oschina.net/hjm100',aa:'無用數據'},
{name:"zmjie100",duty:'前端開發',opensource:'http://git.oschina.net/zmjie100',aa:'無用數據'},
{name:"ghf100",duty:'前端開發',opensource:'http://git.oschina.net/ghf100',aa:'無用數據'},
{name:"zhengshanshan",duty:'前端開發',opensource:'http://git.oschina.net/zhengshanshan',aa:'無用數據'}];
//數據處理
var title = [{"value":"名稱",key:'name'},
{"value":"職務",key:'duty'},
{"value":"開源地址",key:'opensource'}];java

/**dataSwitch函數參數node

@param datas 原始的json數據
@param titles 本身設置的表頭數據
注意：
1.必須設置titles
2.titles是過濾datas的必要條件
3.titles中的key屬性對應的是須要提取的原始數據的key值
4.datas與titles須要相互對應
*/
//數據轉換函數
function dataSwitch(datas,titles){
if(datas == ''|| titles=='') return;
var res = [],resd = [];
for (var j = 0; j < datas.length; j++) {
//清空一下res
res = []
for (var i = 0; i < titles.length; i++) {
res.push({"value":datas[j][titles[i].key]})
}
resd.push(res)
}
return (resd)
}

//JSONToExcelConvertor函數須要的數據格式
// var datas = {"title":[{"value":"店鋪"},{"value":"點擊量"},{"value":"競爭力"}],
// "data":[[{"value":"運營淘寶代",}, {"value":3057},{"value":955}],
// [{"value":"淘寶網",}, {"value":412},{"value":1860}]]
// };git

//空殼函數用來作調用,與方便理解！！
function jsonMethod(){
//執行導出函數
JSONToExcelConvertor(dataSwitch(data,title), "鴻基夢", title,'鴻基夢組織重要成員信息彙總');
}ajax

/**JSONToExcelConvertor函數參數json

@param JSONData 須要導出的數據
@param FileName Excel表名
@param ShowLabel 表頭
@param Explain 表格說明（選填）
注意：
上述參數都爲轉化後數據
*/
function JSONToExcelConvertor(JSONData, FileName, ShowLabel,Explain) {
//先轉化json
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var excel = '<table>',row = '';
//添加說明(若是想要添加說明請傳入Explain參數)
if(Explain)row +="<tr><td colspan='"+ShowLabel.length+"' align='center'>"+Explain+"</td></tr>";
//設置表頭
row += "<tr>";
for (var i = 0, l = ShowLabel.length; i < l; i++){
row += "<td>" + ShowLabel[i].value + '</td>';
}
//換行
excel += row + "</tr>";
//設置數據
for (var i = 0; i < arrData.length; i++){
var row = "<tr>";
for (var index in arrData[i]) {
var value = arrData[i][index].value === "." ? "" : arrData[i][index].value;
row += '<td>' + value + '</td>';
}
excel += row + "</tr>";
}
excel += "</table>";
var excelFile = "<html xmlns:o='urn:schemas-microsoft-com🏢office' xmlns:x='urn:schemas-microsoft-com🏢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 += "";
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 + ".xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}

//---------------------------將表格導出Excel---------------------------//
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 method(tableid){ //整個表格拷貝到EXCEL中
if(getExplorer()=='ie'){
var curTbl = document.getElementById(tableid),
oXL = new ActiveXObject("Excel.Application"),
//建立AX對象excel
oWB = oXL.Workbooks.Add(),
//獲取workbook對象
xlsheet = oWB.Worksheets(1),
//激活當前sheet
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);
oXL.Quit();
oXL = null;
idTmr = window.setInterval("Cleanup();", 1);
}
}else{
tableToExcel(tableid)
}
oXL.worksheets(1).Paste;
}瀏覽器

//兼容ie以外瀏覽器
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>app

```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。