有些时候，我们想把网页上的一些数据下载下来，我们想要把它们用word和excel的方式保存，但是总是找不到合适的方法，最近我也遇到了这样的问题，在网上搜罗一圈下来，也倒是有很多这方面的文章，但是主要是适用于IE浏览器的，对于其他浏览器几乎都是用的插件，我就想用js自己写一个可以导出文件的页面。在搜寻了一些资料后，自己写了一个比较简洁的。
一般情况下，我们导出的内容为表格数据居多，所以我们就以表格为例，导出页面内容
html页面内容
页面就一个基本的表格，和两个按钮，分别用于导出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内容
-
IE浏览器
IE浏览器是最特别的，它的excel导出是用到activex方式，使用js/vbs调用excel对象，下面这种方法仅限于IE，所以局限性比较大。在我的另一个文章中已经写了如何判断浏览器类型请点击这里进入：JavaScript判断浏览器类型
if(getExplorer()=='ie')
{
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");//创建AX对象excel var oWB = oXL.Workbooks.Add(); //获取workbook对象 var xlsheet = oWB.Worksheets(1); //激活当前sheet var 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); //xls.visible = false; oXL.Quit(); oXL = null; //结束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的示例图片
image.png
我们来详细解读一下代码，首先汉化参数里的type是点击按钮是传过去的对应的类型，doc或者excel，当判断为doc时，定义变量doc，doc的值就是table（也就是要导出的）内容，然后把doc放在docFile这样的形式中，encodeURIComponent()函数可把字符串作为 URI 组件进行编码,该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ),unescape()通过找到形式为 %xx 和 %uxxxx 的字符序列（x 表示十六进制的数字），用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码,btoa()就是把需要转码的进行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);
}
image.png
你可以发现导出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里的内容不同，如果需要查看更多网页中的重要MIME类型列表，点击这里
| 扩展名 | 文档类型 | MIME Type |
|---|---|---|
| .doc | Microsoft Word | application/msword |
| .xls | Microsoft Excel | application/vnd.ms-excel |
网友评论