有些時候，我們想把網(wǎng)頁上的一些數(shù)據(jù)下載下來蜓耻，我們想要把它們用word和excel的方式保存茫舶，但是總是找不到合適的方法，最近我也遇到了這樣的問題刹淌，在網(wǎng)上搜羅一圈下來饶氏，也倒是有很多這方面的文章，但是主要是適用于IE瀏覽器的有勾，對于其他瀏覽器幾乎都是用的插件疹启，我就想用js自己寫一個可以導出文件的頁面。在搜尋了一些資料后蔼卡，自己寫了一個比較簡潔的喊崖。
一般情況下，我們導出的內(nèi)容為表格數(shù)據(jù)居多雇逞，所以我們就以表格為例荤懂，導出頁面內(nèi)容
html頁面內(nèi)容
頁面就一個基本的表格，和兩個按鈕塘砸，分別用于導出word和excel
<body>
<table id="score">
<tr>
<th>Name</th>
<th>Grade</th>
<th>Math</th>
<th>History</th>
</tr>
<tr>
<td>Like</td>
<td>1</td>
<td>65</td>
<td>83</td>
</tr>
<tr>
<td>Mary</td>
<td>1</td>
<td>34</td>
<td>89.5</td>
</tr>
<tr>
<td>Lily</td>
<td>2</td>
<td>90</td>
<td>95</td>
</tr>
<tr>
<td>BOb</td>
<td>2</td>
<td>76.3</td>
<td>80.1</td>
</tr>
<tr>
<td>Sendy</td>
<td>3</td>
<td>60</td>
<td>79</td>
</tr>
</table>
<input id="Button1" type="button" value="導出word" onclick="tableExport('doc')" />
<input id="Button1" type="button" value="導出excel" onclick="tableExport('excel')" />
</body>
js內(nèi)容
-
IE瀏覽器
IE瀏覽器是最特別的势誊，它的excel導出是用到activex方式，使用js/vbs調(diào)用excel對象谣蠢，下面這種方法僅限于IE，所以局限性比較大查近。在我的另一個文章中已經(jīng)寫了如何判斷瀏覽器類型請點擊這里進入：JavaScript判斷瀏覽器類型
if(getExplorer()=='ie')
{
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");//創(chuàng)建AX對象excel var oWB = oXL.Workbooks.Add(); //獲取workbook對象 var xlsheet = oWB.Worksheets(1); //激活當前sheet var sel = document.body.createTextRange(); sel.moveToElementText(curTbl); //把表格中的內(nèi)容移到TextRange中 sel.select; //全選TextRange中內(nèi)容 sel.execCommand("Copy"); //復制TextRange中內(nèi)容 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); //xls.visible = false; oXL.Quit(); oXL = null; //結(jié)束excel進程眉踱，退出完成 //window.setInterval("Cleanup();",1); idTmr = window.setInterval("Cleanup();", 1); } } -
其他主流瀏覽器（Chrome、Firefox等）
其實只要懂這個基本步驟和原理霜威，導出文件就變得輕而易舉了谈喳。下面的代碼是以導出word為例
function tableExport(type){
if(type=='doc'){
var doc="";
doc+="<table>";
var html=document.getElementById("score").innerHTML;
doc+=html;
doc+="</table>";
var docFile="<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:"+doc+"' xmlns='http://www.w3.org/TR/REC-html40'>";
docFile=docFile+"<head></head>"+doc+"</body></html>";
var base64data="base64,"+window.btoa(unescape(encodeURIComponent(docFile)));
window.open('data:application/msword;'+ base64data);
}
}
下面為導出word的示例圖片
我們來詳細解讀一下代碼，首先漢化參數(shù)里的type是點擊按鈕是傳過去的對應的類型戈泼，doc或者excel婿禽，當判斷為doc時，定義變量doc大猛，doc的值就是table（也就是要導出的）內(nèi)容扭倾，然后把doc放在docFile這樣的形式中，encodeURIComponent()函數(shù)可把字符串作為 URI 組件進行編碼,該方法不會對 ASCII 字母和數(shù)字進行編碼挽绩，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ' ( ),unescape()通過找到形式為 %xx 和 %uxxxx 的字符序列（x 表示十六進制的數(shù)字）膛壹，用 Unicode 字符 \u00xx 和 \uxxxx 替換這樣的字符序列進行解碼,btoa()就是把需要轉(zhuǎn)碼的進行base64編碼，編碼后才能被識別。
導出excel
if(type=='excel'){
var doc="";
doc+="<table>";
var html=document.getElementById("score").innerHTML;
doc+=html;
doc+="</table>";
var docFile="<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:"+doc+"' xmlns='http://www.w3.org/TR/REC-html40'>";
docFile=docFile+"<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>"+doc+"</body></html>";
var base64data="base64,"+window.btoa(unescape(encodeURIComponent(docFile)));
window.open('data:application/vnd.ms-excel;'+ base64data);
}
你可以發(fā)現(xiàn)導出word和excel的代碼幾乎相同模聋，所以我們可以合并他們肩民，寫的更簡潔。
function tableExport(type){
var doc="";
doc+="<table>";
var html=document.getElementById("score").innerHTML;
doc+=html;
doc+="</table>";
var a=document.body.innerHTML;
var docFile="<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:"+a+"' xmlns='http://www.w3.org/TR/REC-html40'>";
docFile=docFile+"<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>"+doc+"</body></html>";
var base64data="base64,"+window.btoa(unescape(encodeURIComponent(docFile)));
if(type=='doc'){
window.open('data:application/msword;'+ base64data);
}else if(type=='excel'){
window.open('data:application/vnd.ms-excel;'+ base64data);
}
}
但是唯一不同的是MIME類型链方，也就是代碼中window.open里的內(nèi)容不同持痰，如果需要查看更多網(wǎng)頁中的重要MIME類型列表，點擊這里
| 擴展名 | 文檔類型 | MIME Type |
|---|---|---|
| .doc | Microsoft Word | application/msword |
| .xls | Microsoft Excel | application/vnd.ms-excel |
