1. 程式人生 > >如何將頁面上的數據導入excel中

如何將頁面上的數據導入excel中

進行 mil his spl 查找 inf css ie瀏覽器 art

網上關於頁面數據導入excel的文章很多,但是大部分都是關於 ActiveXObject 對象,可是ActiveXObject 對象是只支持IE的,可我連IE11也測試了,還是無法識別,又查到消息,好像該對象只支持IE7,IE8,所以果斷放棄。

繼續查找各大論壇,終於找到JsExcelXml的插件,

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/JsExcelXml.js"></script>
<script>
//導出數據到excel文件

function exportExcel()
{
var columnsInfo = [];//列設置

var data = [];//數據


$("#grid").find("th").each(function(i) {
var text = $(this).text();
var column = { field: text, title: text};
columnsInfo.push(column);
});
$("#grid").find("tr").each(function(i) {
if(i == 0) return true;
var dataObj = new Object();
$(this).find("td").each(function(j) {
var column = columnsInfo[j];
var text = $(this).text();
dataObj[column.field] = text;
});
data.push(dataObj);
});


//導出excel設置

var opts = {
HeadInfo: [columnsInfo],
RowInfo: data,
FooterInfo: null,
MergeCells: null,
CellStyles: null,
MainTitle: { Displayname: ‘‘, Alignment: ‘Center‘, BgColor: ‘#FFFFFF‘, FontSize: 16, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
SecondTitle: { Displayname: ‘‘, Alignment: ‘Left‘, BgColor: ‘#FFFFFF‘, FontSize: 14, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
HeadStyle: { Alignment: ‘Center‘, BgColor: ‘#D8D8D8‘, FontSize: 12, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
DataStyle: { Alignment: ‘Center‘, BgColor: ‘#FFFFFF‘, FontSize: 10, FontColor: "#000000", IsBold: false, IsItalic: true, IsUnderLine: false },
FootStyle: { Alignment: ‘Center‘, BgColor: ‘#D8D8D8‘, FontSize: 12, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
RowStart: 1,
ColumStart: 1,
SheetName: ‘sheet‘
}
var excelxml = JSXmlExcel.BulidXml(opts);//導出的excel對應的xml字符串


if ($.browser.msie) { //如果是IE瀏覽器,ie方式的導出

var xlsWin = null;
if (!!document.all("glbHideFrm")) {
xlsWin = glbHideFrm;
} else {
var width = 1; var height = 1;
var openPara = "left=" + (window.screen.width / 2 + width / 2) + ",top=" + (window.screen.height + height / 2) + ",scrollbars=no,width=" + width + ",height=" + height;
xlsWin = window.open("", "_blank", openPara);
}
xlsWin.document.write(excelxml);
xlsWin.document.close();
xlsWin.document.execCommand(‘Saveas‘, true, "導出數據.xls");
xlsWin.close();
}else{ //其他瀏覽器的導出

var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([excelxml]);
var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = "導出數據.xls";
var ev = document.createEvent("MouseEvents");
ev.initMouseEvent(
"click", true, false, window, 0, 0, 0, 0, 0
, false, false, false, false, 0, null
);
save_link.dispatchEvent(ev);
}

}

</script>
</head>

<body>
<button onclick="exportExcel();return false;">導出數據為excel文件</button><br><br>

<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>


<table id="grid" class="gridtable">
<tr>
<th>Header1</th><th>Header2</th><th>Header3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>



</body>

</html>

這是主要針對table結構的數據進行處理。

如何將頁面上的數據導入excel中