JavaScript導(dǎo)出Excel實(shí)例詳解
本文實(shí)例講述了JavaScript導(dǎo)出Excel的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>WEB頁面導(dǎo)出為EXCEL文檔的方法</title>
</head>
<body>
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5" align="center">WEB頁面導(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>
<input type="button" onclick="javascript:method1('tableExcel');" value="第一種方法導(dǎo)入到EXCEL">
<input type="button" onclick="javascript:method2('tableExcel');" value="第二種方法導(dǎo)入到EXCEL">
<input type="button" onclick="javascript:getXlsFromTbl('tableExcel',null);" value="第三種方法導(dǎo)入到EXCEL">
<SCRIPT LANGUAGE="javascript">
function method1(tableid) {//整個(gè)表格拷貝到EXCEL中
var curTbl = document.getElementByIdx_x_x(tableid);
var oXL = new ActiveXObject("Excel.Application");
//創(chuàng)建AX對(duì)象excel
var oWB = oXL.Workbooks.Add();
//獲取workbook對(duì)象
var oSheet = oWB.ActiveSheet;
//激活當(dāng)前sheet
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
//把表格中的內(nèi)容移到TextRange中
sel.select();
//全選TextRange中內(nèi)容
sel.execCommand("Copy");
//復(fù)制TextRange中內(nèi)容
oSheet.Paste();
//粘貼到活動(dòng)的EXCEL中
oXL.Visible = true;
//設(shè)置excel可見屬性
}
function method2(tableid) //讀取表格中每個(gè)單元到EXCEL中
{
var curTbl = document.getElementByIdx_x_x(tableid);
var oXL = new ActiveXObject("Excel.Application");
//創(chuàng)建AX對(duì)象excel
var oWB = oXL.Workbooks.Add();
//獲取workbook對(duì)象
var oSheet = oWB.ActiveSheet;
//激活當(dāng)前sheet
var Lenr = curTbl.rows.length;
//取得表格行數(shù)
for (i = 0; i < Lenr; i++)
{
var Lenc = curTbl.rows(i).cells.length;
//取得每行的列數(shù)
for (j = 0; j < Lenc; j++)
{
oSheet.Cells(i + 1, j + 1).value = curTbl.rows(i).cells(j).innerText;
//賦值
}
}
oXL.Visible = true;
//設(shè)置excel可見屬性
}
function getXlsFromTbl(inTblId, inWindow) {
try {
var allStr = "";
var curStr = "";
//alert("getXlsFromTbl");
if (inTblId != null && inTblId != "" && inTblId != "null") {
curStr = getTblData(inTblId, inWindow);
}
if (curStr != null) {
allStr += curStr;
}
else {
alert("你要導(dǎo)出的表不存在！");
return;
}
var fileName = getExcelFileName();
doFileExport(fileName, allStr);
}
catch(e) {
alert("導(dǎo)出發(fā)生異常:" + e.name + "->" + e.description + "!");
}
}
function getTblData(inTbl, inWindow) {
var rows = 0;
//alert("getTblData is " + inWindow);
var tblDocument = document;
if (!!inWindow && inWindow != "") {
if (!document.all(inWindow)) {
return null;
}
else {
tblDocument = eval_r(inWindow).document;
}
}
var curTbl = tbldocument.getElementByIdx_x_x(inTbl);
var outStr = "";
if (curTbl != null) {
for (var j = 0; j < curTbl.rows.length; j++) {
//alert("j is " + j);
for (var i = 0; i < curTbl.rows[j].cells.length; i++) {
//alert("i is " + i);
if (i == 0 && rows > 0) {
outStr += " ";
rows -= 1;
}
outStr += curTbl.rows[j].cells[i].innerText + " ";
if (curTbl.rows[j].cells[i].colSpan > 1) {
for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {
outStr += " ";
}
}
if (i == 0) {
if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {
rows = curTbl.rows[j].cells[i].rowSpan - 1;
}
}
}
outStr += " ";
}
}
else {
outStr = null;
alert(inTbl + "不存在!");
}
return outStr;
}
function getExcelFileName() {
var d = new Date();
var curYear = d.getYear();
var curMonth = "" + (d.getMonth() + 1);
var curDate = "" + d.getDate();
var curHour = "" + d.getHours();
var curMinute = "" + d.getMinutes();
var curSecond = "" + d.getSeconds();
if (curMonth.length == 1) {
curMonth = "0" + curMonth;
}
if (curDate.length == 1) {
curDate = "0" + curDate;
}
if (curHour.length == 1) {
curHour = "0" + curHour;
}
if (curMinute.length == 1) {
curMinute = "0" + curMinute;
}
if (curSecond.length == 1) {
curSecond = "0" + curSecond;
}
var fileName = "leo_zhang" + "_" + curYear + curMonth + curDate + "_"
+ curHour + curMinute + curSecond + ".csv";
//alert(fileName);
return fileName;
}
function doFileExport(inName, inStr) {
var xlsWin = null;
if (!!document.all("glbHideFrm")) {
xlsWin = glbHideFrm;
}
else {
var width = 6;
var height = 4;
var openPara = "left=" + (window.screen.width / 2 - width / 2)
+ ",top=" + (window.screen.height / 2 - height / 2)
+ ",scrollbars=no,width=" + width + ",height=" + height;
xlsWin = window.open("", "_blank", openPara);
}
xlsWin.document.write(inStr);
xlsWin.document.close();
xlsWin.document.execCommand('Saveas', true, inName);
xlsWin.close();
}
</SCRIPT>
</body>
</html>
下面是處理excel 進(jìn)程關(guān)閉問題
//---------------------------------------------------------
<script>
var strSaveLocation = 'file:///E:/1.xls'
function createXLS() {
var excel = new ActiveXObject("Excel.Application");
var wk = excel.Workbooks.Add();
wk.SaveAs(strSaveLocation);
wk.Saved = true;
excel.Quit();
}
function writeXLS() {
var excel = new ActiveXObject("Excel.Application");
var wk = excel.Workbooks.Open(strSaveLocation);
var sheet = wk.Worksheets(1);
sheet.Cells(1, 1).Value = '測(cè)試字符串';
wk.SaveAs(strSaveLocation);
wk.Saved = true;
excel.Quit();
}
</script>
<body>
<button onclick="createXLS()">創(chuàng)建</button>
<button onclick="writeXLS()">重寫</button>
</body>
在這個(gè)例子中，在本地文件操作時(shí)并不會(huì)出現(xiàn)異常?！疃嘀皇怯幸恍﹥?nèi)存垃圾而已。然而，如果strSaveLocation是一個(gè)遠(yuǎn)程的URL，這時(shí)本地將會(huì)保存一個(gè)文件存取權(quán)限的憑證，而且同時(shí)只能一個(gè)(遠(yuǎn)程的)實(shí)例來開啟該excel文檔并存儲(chǔ)。于是如果反復(fù)點(diǎn)擊"重寫"按鈕，就會(huì)出現(xiàn)異常。
——注意，這是在SPS中操作共享文件時(shí)的一個(gè)實(shí)例的簡化代碼。因此，它并非“學(xué)術(shù)的”無聊討論，而且工程中的實(shí)際問題。
解決這個(gè)問題的方法很復(fù)雜。它涉及到兩個(gè)問題：
① 本地憑證的釋放
② ActiveX Object實(shí)例的釋放
下面我們先從JavaScript中對(duì)象的“失效”問題說起。簡單的說：
① 一個(gè)對(duì)象在其生存的上下文環(huán)境之外，即會(huì)失效。
② 一個(gè)全局的對(duì)象在沒有被執(zhí)用(引用)的情況下，即會(huì)失效。
例如：
// JavaScript對(duì)象何時(shí)失效
//---------------------------------------------------------
function testObject() {
var _obj1 = new Object();
}
function testObject2() {
var _obj2 = new Object();
return _obj2;
}
// 示例1
testObject();
// 示例2
testObject2()
// 示例3
var obj3 = testObject2();
obj3 = null;
// 示例4
var obj4 = testObject2();
var arr = [obj4];
obj3 = null;
arr = [];
在這四個(gè)示例中：
- “示例1”在函數(shù)testObject()中構(gòu)造了_obj1，但是在函數(shù)退出時(shí)，它就已經(jīng)離開了函數(shù)的上下文環(huán)境，因此_obj1失效了；
- “示例2”中，testObject2()中也構(gòu)造了一個(gè)對(duì)象_obj2并傳出，因此對(duì)象有了“函數(shù)外”的上下文環(huán)境(和生存周期)，然而由于函數(shù)的返回值沒有被其它變量“持有”，因此_obj2也立即失效了；
- “示例3”中，testObject2()構(gòu)造的_obj2被外部的變量obj3持用了，這時(shí)，直到“obj3=null”這行代碼生效時(shí)，_obj2才會(huì)因?yàn)橐藐P(guān)系消失而失效。
- 與示例3相同的原因，“示例4”中的_obj2會(huì)在“arr=[]”這行代碼之后才會(huì)失效。
但是，對(duì)象的“失效”并不等會(huì)“釋放”。在JavaScript運(yùn)行環(huán)境的內(nèi)部，沒有任何方式來確切地告訴用戶“對(duì)象什么時(shí)候會(huì)釋放”。這依賴于JavaScript的內(nèi)存回收機(jī)制。——這種策略與.NET中的回收機(jī)制是類同的。
在前面的Excel操作示例代碼中，對(duì)象的所有者，也就是"EXCEL.EXE"這個(gè)進(jìn)程只能在“ActiveX Object實(shí)例的釋放”之后才會(huì)發(fā)生。而文件的鎖，以及操作系統(tǒng)的權(quán)限憑證是與進(jìn)程相關(guān)的。因此如果對(duì)象僅是“失效”而不是“釋放”，那么其它進(jìn)程處理文件和引用操作系統(tǒng)的權(quán)限憑據(jù)時(shí)就會(huì)出問題。
——有些人說這是JavaScript或者COM機(jī)制的BUG。其實(shí)不是，這是OS、IE和JavaScript之間的一種復(fù)雜關(guān)系所導(dǎo)致的，而非獨(dú)立的問題。
Microsoft公開了解決這種問題的策略：主動(dòng)調(diào)用內(nèi)存回收過程。
在(微軟的)JScript中提供了一個(gè)CollectGarbage()過程(通常簡稱GC過程)，GC過程用于清理當(dāng)前IE中的“失效的對(duì)象失例”，也就是調(diào)用對(duì)象的析構(gòu)過程。
在上例中調(diào)用GC過程的代碼是：
// 處理ActiveX Object時(shí)，GC過程的標(biāo)準(zhǔn)調(diào)用方式
//---------------------------------------------------------
function writeXLS() {
//(略...)
excel.Quit();
excel = null;
setTimeout(CollectGarbage, 1);
}
第一行代碼調(diào)用excel.Quit()方法來使得excel進(jìn)程中止并退出，這時(shí)由于JavaScript環(huán)境執(zhí)有excel對(duì)象實(shí)例，因此excel進(jìn)程并不實(shí)際中止。
第二行代碼使excel為null，以清除對(duì)象引用，從而使對(duì)象“失效”。然而由于對(duì)象仍舊在函數(shù)上下文環(huán)境中，因此如果直接調(diào)用GC過程，對(duì)象仍然不會(huì)被清理。
第三行代碼使用setTimeout()來調(diào)用CollectGarbage函數(shù)，時(shí)間間隔設(shè)為'1'，只是使得GC過程發(fā)生在writeXLS()函數(shù)執(zhí)行完之后。這樣excel對(duì)象就滿足了“能被GC清理”的兩個(gè)條件：沒有引用和離開上下文環(huán)境。
GC過程的使用，在使用了ActiveX Object的JS環(huán)境中很有效。一些潛在的ActiveX Object包括XML、VML、OWC(Office Web Componet)、flash，甚至包括在JS中的VBArray。
從這一點(diǎn)來看，ajax架構(gòu)由于采用了XMLHTTP，并且同時(shí)要滿足“不切換頁面”的特性，因此在適當(dāng)?shù)臅r(shí)候主動(dòng)調(diào)用GC過程，會(huì)得到更好的效率用UI體驗(yàn)。
事實(shí)上，即使使用GC過程，前面提到的excel問題仍然不會(huì)被完全解決。因?yàn)镮E還緩存了權(quán)限憑據(jù)。使頁的權(quán)限憑據(jù)被更新的唯一方法，只能是“切換到新的頁面”，因此事實(shí)上在前面提到的那個(gè)SPS項(xiàng)目中，我采用的方法并不是GC，而是下面這一段代碼：
// 處理ActiveX Object時(shí)采用的頁面切換代碼
//---------------------------------------------------------
function writeXLS() {
//(略...)
excel.Quit();
excel = null;
// 下面代碼用于解決IE call Excel的一個(gè)BUG, MSDN中提供的方法:
// setTimeout(CollectGarbage, 1);
// 由于不能清除(或同步)網(wǎng)頁的受信任狀態(tài), 所以將導(dǎo)致SaveAs()等方法在
// 下次調(diào)用時(shí)無效.
location.reload();
}
最后之最后，關(guān)于GC的一個(gè)補(bǔ)充說明：在IE窗體被最小化時(shí)，IE將會(huì)主動(dòng)調(diào)用一次
CollectGarbage()函數(shù)。這使得IE窗口在最小化之后，內(nèi)存占用會(huì)有明顯改善。
希望本文所述對(duì)大家基于javascript的web程序設(shè)計(jì)有所幫助。
- JavaScript將數(shù)組轉(zhuǎn)換成CSV格式的方法
- 使用javascript實(shí)現(xiàn)json數(shù)據(jù)以csv格式下載
- JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法
- 用javascript將數(shù)據(jù)導(dǎo)入Excel示例代碼
- javascript操作excel生成報(bào)表示例
- javascript操作excel生成報(bào)表全攻略
- 通過復(fù)制Table生成word和excel的javascript代碼
- javascript實(shí)現(xiàn)客戶端兼容各瀏覽器創(chuàng)建csv并下載的方法
相關(guān)文章
本篇文章主要是對(duì)JS日期比較大小的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片瀑布流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
如何優(yōu)雅地取消 JavaScript 異步任務(wù)
這篇文章主要介紹了如何優(yōu)雅地取消 JavaScript 異步任務(wù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
connection reset by peer問題總結(jié)及解決方案
這篇文章主要介紹了connection reset by peer問題解決方案的相關(guān)資料,這里整理了一些常見問題，及如何解決，需要的朋友可以參考下2016-10-10
本文為大家介紹下購物車如何實(shí)現(xiàn)選中得到價(jià)格，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-01-01
這篇文章主要介紹了萊鳥介紹javascript onclick事件的相關(guān)資料,需要的朋友可以參考下2016-01-01
JavaScript調(diào)試技巧之console.log()詳解
對(duì)于JavaScript程序的調(diào)試，相比于alert()，使用console.log()是一種更好的方式，原因在于：alert()函數(shù)會(huì)阻斷JavaScript程序的執(zhí)行，從而造成副作用；而console.log()僅在控制臺(tái)中打印相關(guān)信息，因此不會(huì)造成類似的顧慮2014-03-03
2008-02-02
layui實(shí)現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項(xiàng)
今天小編就為大家分享一篇layui實(shí)現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
原生JavaScript和Vue實(shí)現(xiàn)從百度地圖抓取經(jīng)緯度
在前端開發(fā)中,使用百度地圖 API 來獲取用戶的經(jīng)緯度是一種常見需求,本文提供了使用原生 JavaScript 和 Vue.js 實(shí)現(xiàn)從百度地圖抓取經(jīng)緯度的詳細(xì)示例,需要的可以了解下2024-11-11