網站開發進階(二十五)js如何將html表格匯出為excel檔案
js如何將html表格匯出為excel檔案
贈人玫瑰，手留餘香。若您感覺此篇博文對您有用，請花費2秒時間點個贊，您的鼓勵是我不斷前進的動力，共勉！jsp頁面資料匯出成excel的方法很多，今天介紹一種簡單的js方法：
原始碼
// 匯出 $scope.doExportExcel = function() { var winname = window.open('', '_blank', 'top=10000'); //獲得頁面上需要匯出的資料內容 var strHTML = document.all.content_med_statement.innerHTML; // 其中tableExcel是需要匯出資料的div的id或者表的id winname.document.open('text/html', 'replace'); winname.document.writeln(strHTML); winname.document.execCommand('saveas','','lmapp.xls'); // excel是匯出excel的預設名稱 winname.close(); };
程式碼解讀
1.window.open('', '_blank', 'top=10000');
用javascript中的window.open()在一個新的視窗開啟一個新的空白網頁。
window.open(pageURL,name,parameters)
其中：
pageURL 為子視窗路徑
name 為子視窗控制代碼
parameters 為視窗引數(各引數用逗號分隔)
2.document.all.content_med_statement.innerHTML;
document.all是頁面內所有元素的一個集合。如：
document.all(0)表示頁面內第一個元素
document.all可以判斷瀏覽器是否是
if(document.all){
alert("IE!");
}
3.winname.document.open('text/html', 'replace');
open() 方法可開啟一個新文件，並擦除當前文件的內容。
document.open(mimetype,replace)
引數描述
mimetype可選。規定正在寫的文件的型別。預設值是 "text/html"。
replace 可選。當此引數設定後，可引起新文件從父文件繼承歷史條目。
說明
該方法將擦除當前 HTML 文件的內容，開始一個新的文件，新文件用 write() 方法或 writeln()
提示和註釋
重要事項：呼叫 open() 方法開啟一個新文件並且用 write() 方法設定文件內容後，必須記住用 close 方法關閉文件，並迫使其內容顯示出來。
註釋：屬於被覆蓋的文件的一部分的指令碼或事件控制代碼不能呼叫該方法，因為指令碼或事件控制代碼自身也會被覆蓋。
4.winname.document.execCommand('saveas','','lmapp.xls');
document.execCommand(sCommand,互動方式, 動態引數])
互動方式引數如果是true的話將顯示對話方塊，如果為false的話，則不顯示對話方塊，動態引數一般為一可用值或屬性值。
如果把“.”後面的內容放進去的話就改變檔案的格式屬性了，從而也就得到了我們所需要的.xls excel格式。
閱讀完原始碼之後,在實際操作過程中還是出現了問題，之間彈出框一閃而過，然後就沒有任何效果了。
繼續嘗試其它方法，發現一個問題:是不是因為自己沒有安裝微軟的excel，因為我知道自己安裝的是wps。嘗試安裝一下微軟的excel。
結果發現問題依舊，嘗試以下程式碼:
<HTML>
<HEAD>
<TITLE>將頁面中指定表格的資料匯入到Excel中</TITLE>
<SCRIPT LANGUAGE="javascript">
<!--
function AutoExcel(){
var oXL = new ActiveXObject("Excel.Application"); //建立應該物件
var oWB = oXL.Workbooks.Add();//新建一個Excel工作簿
var oSheet = oWB.ActiveSheet;//指定要寫入內容的工作表為活動工作表
var table = document.getElementById("data");//指定要寫入的資料來源的id
var hang = table.rows.length;//取資料來源行數
var lie = table.rows(0).cells.length;//取資料來源列數
// Add table headers going cell by cell.
for (i=0;i<hang;i++){//在Excel中寫行
for (j=0;j<lie;j++){//在Excel中寫列
//定義格式
oSheet.Cells(i+1,j+1).NumberFormatLocal = "@";//將單元格的格式定義為文字
//oSheet.Cells(i+1,j+1).Font.Bold = true;//加粗
oSheet.Cells(i+1,j+1).Font.Size = 10;//字型大小
oSheet.Cells(i+1,j+1).value = table.rows(i).cells(j).innerText;//向單元格寫入值
}
}
oXL.Visible = true;
oXL.UserControl = true;
oXL=null
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<table border="0" width="300" id="data" bgcolor="black" cellspacing="1">
<tr bgcolor="white">
<td>編號</td>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
</tr>
<tr bgcolor="white">
<td>0001</td>
<td>張三</td>
<td>22</td>
<td>女</td>
</tr>
<tr bgcolor="white">
<td>0002</td>
<td>李四</td>
<td>23</td>
<td>男</td>
</tr>
</table>
<input type="button" name="out_excel" onclick="AutoExcel();" value="匯出到excel">
</BODY>
</HTML>結果發現，其只可以執行在IE瀏覽器下，估計對IE的版本還會有限制，無語了。結果就是個這嗎？難道只有IE才可以嗎？更無語的是,下面的資料表格居然無法匯出。
<table class="table" id="body_med_statement" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tbody><tr>
<th>序號</th>
<th>藥品名</th>
<th>藥品ID</th>
<th>價格</th>
<th>數量</th>
<th>下單時間</th>
<th>訂單ID</th>
<th>訂單內容</th>
<th>購藥者</th>
<th>處方藥</th>
<th>藥品種類</th>
</tr>
<!-- ngRepeat: item in querydata --><tr ng-repeat="item in querydata" class="ng-scope">
<td ng-bind="$index+1" class="ng-binding">1</td>
<td class="ng-binding">感冒靈顆粒</td>
<td><a ui-sref="#" class="ng-binding">TZ11020480</a></td>
<td class="ng-binding">8</td>
<td class="ng-binding">1</td>
<td class="ng-binding">2015-11-19 11:06:05</td>
<td class="ng-binding">LM2015081700001736</td>
<td class="ng-binding">[感冒靈顆粒]</td>
<td class="ng-binding">U13899990000</td>
<td class="ng-binding">處方</td>
<td class="ng-binding">中藥</td>
</tr><!-- end ngRepeat: item in querydata --><tr ng-repeat="item in querydata" class="ng-scope">
<td ng-bind="$index+1" class="ng-binding">2</td>
<td class="ng-binding">感冒靈顆粒</td>
<td><a ui-sref="#" class="ng-binding">TZ11020480</a></td>
<td class="ng-binding">8</td>
<td class="ng-binding">1</td>
<td class="ng-binding">2015-11-19 11:19:38</td>
<td class="ng-binding">LM2015081700001980</td>
<td class="ng-binding">[感冒靈顆粒]</td>
<td class="ng-binding">U13899990000</td>
<td class="ng-binding">處方</td>
<td class="ng-binding">中藥</td>
</tr><!-- end ngRepeat: item in querydata -->
</tbody>
</table>繼續嘗試其它方法:
</pre><pre name="code" class="javascript">function method1(tableid){
var curTbl = document.getElementById(tableid);
var oXL;
try{
oXL = new ActiveXObject("Excel.Application"); //建立AX物件excel
}catch(e){
alert("無法啟動Excel!\n\n如果您確信您的電腦中已經安裝了Excel，"+"那麼請調整IE的安全級別。\n\n具體操作：\n\n"+"工具 → Internet選項 → 安全 → 自定義級別 → 對沒有標記為安全的ActiveX進行初始化和指令碼執行 → 啟用");
return false;
}
var oWB = oXL.Workbooks.Add(); //獲取workbook物件
var oSheet = oWB.ActiveSheet;//啟用當前sheet
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl); //把表格中的內容移到TextRange中
sel.select(); //全選TextRange中內容
sel.execCommand("Copy");//複製TextRange中內容
oSheet.Paste();//貼上到活動的EXCEL中
oXL.Visible = true; //設定excel可見屬性
var fname = oXL.Application.GetSaveAsFilename("將table匯出到excel.xls", "Excel Spreadsheets (*.xls), *.xls");
oWB.SaveAs(fname);
oWB.Close();
oXL.Quit();
}經過對比，發現這個方法最實用。決定對之進行改進。改進的第一步首先還是閱讀原始碼。
var fname = oXL.Application.GetSaveAsFilename("lmapp_.xls", "Excel Spreadsheets (*.xls), *.xls");
Application.GetSaveAsFilename 方法：簡單來說就是顯示另存為對話方塊，方便使用者輸入檔名進行儲存。
語法：
expression.GetSaveAsFilename(InitialFilename, FileFilter, FilterIndex, Title, ButtonText)
expression 必需。該表示式返回Application型別物件
InitialFilename Variant型別，可選。指定初始的檔名
FileFilter Variant型別，可選。一個指定檔案篩選條件的字串，格式如："文字檔案, *.txt"
FilterIndex Variant 型別，可選。指定預設檔案篩選條件的索引號，取值範圍為 1 到 FileFilter 指定的篩選條件數目之間
Title Variant 型別，可選。指定對話方塊標題
ButtonText Variant 型別，可選。僅用於 Macintosh
使用的時候請注意如下幾項：
1.如果省略InitialFilename引數，Microsoft Excel 將活動工作簿的名稱作為初始檔名
2.如果省略FileFilter引數，則預設引數值為“所有檔案 (*.*),*.*”
3.如果省略FilterIndex引數，或者取值大於可用篩選數目，則採用第一個檔案篩選條件
4.如果省略Title引數，則使用預設標題。
接著又發現一個怪現象:開發的管理系統可以在Chrome、FireFox等瀏覽器上執行，但是在IE上卻沒有任何效果。
火狐是最嚴格執行w3c標準的。你在網頁中用到了哪些特殊的html, css, js特性，可以先到w3c網站看看這些特性得到了哪些瀏覽器的支援。
new ActiveXObject("Excel.Application"); //建立AX物件excel
在FireFox中建立物件時報錯。解決方法：IE安全級別降低
ActiveX控制可以調本機的任何資源,可以實現所有可執行檔案的功能,但是這個外掛,在第一次從網頁上載入時,需要從網上下載(自動),並且需要由使用者許可後才行.要顯示該程式是安全說明,需要向微軟申請.
更致命的是:ActiveX 僅限IE瀏覽器中使用。無解決方案！
但是問題又來了，系統在IE上跑不起來啊！
備註
AngularJS 1.3拋棄了對IE8的支援。可以在我們的部落格上了解更多內容。AngularJS 1.2將繼續支援IE8，但核心團隊已經不打算在解決IE8及之前版本的問題上花時間。
而自己恰好使用的就是1.3系列版本,瀏覽器就是IE8！無語了都，被相容性搞的頭暈目眩。
嘗試著使用更高版本的IE瀏覽器，例如IE9、IE10。
有一句話意味深長，貼上，姑且體會之。
總而言之，使用了angular.js，就彷彿看到了當初W3C標準化組織對web的遠景規劃：用XML替代html一樣。各種操作宣告、自定義標籤將使DOM操作和應用邏輯解耦，它能大大改善程式碼的可調性。Angular信奉的是，當組建檢視(UI)同時又要寫軟體邏輯時，宣告式的程式碼會比命令式的程式碼好得多。
隨著mvvm逐漸成熟，現在使用jQuery構建web應用已經顯得過時了，而且使用jQuery需要編寫更多的程式碼去控制dom的取值、賦值、繫結事件等，而mvvm從底層實現了對以上操作的支援，讓程式設計師可以從原始的複雜、重複的編碼中解放出來，讓程式設計師可以將更多的重心放在業務的實現、資料的互動上去，而且大大減少了程式設計師需要編寫的程式碼量。
多年來的web經驗告訴我們，編寫web應用最難的地方主要在於瀏覽器的相容問題，而且更多的相容問題主要體現在ie上，因此只要能解決ie上的問題，那麼這個web應用的其他問題都不再是問題了。