JQuery下载网页的方法

前段时间需要写一个下载网页的程序，要求是点击导出按钮即可下载本网页，并保存成.html格式，

使用网上的<a> </a>链接下载方法只适合用于.txt, .rar,.exe等文件的下载，而不能下载图片和网页内容（使用浏览器中的另存为是可以的，但这并不是在网页中实现，而是浏览器自身的附带功能），我们需要改写程序来下载网页中的内容并保存成HTML格式，使用的方法如下：

针对不同的浏览器，下载方法有些差异，但是火狐和谷歌中下载方法是可以通用的，但是IE需要另外的方法：

1 谷歌和火狐：

方法：模拟鼠标点击事件，调用浏览器中的下载功能（JavaScript鼠标事件）

代码：function ExportFile(strFileName, strFileData) {
    var aLink = document.createElement('a');
    var blob = new Blob([strFileData]);
    var evt = document.createEvent("MouseEvents");
    evt.initEvent("click", true, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
    aLink.download = strFileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
}

虽然使用的还是<a> 链接的方法，但是这里使用了鼠标事件，

var blob = new Blob([strFileData]);

这句代码是使用指定的数据创建二进制大对象，再创建鼠标事件，从而分发事件模拟下载功能；

2 有人说，上面这种方法不是挺好的吗，IE浏览器不支持吗？嗯，对了，IE浏览器就是不支持这样的方法，这是因为在IE10之前的版本中，是不支持 Blob（二进制大对象）类型（IE真是奇葩），所以在IE浏览器中我们需要另寻他路。

经过长时间的尝试，发现了在IE浏览器下的替代方法，但不是很完美，存在一些其他的问题，不过基本功能是可以的，代码如下：

代码：

var winName = window.open('', '_blank','');
winName.document.open('text/html', 'replace');
winName.document.write(strReportText);
winName.document.execCommand('SaveAs');
winName.close();

使用window.open()方法来打开新页面，然后使用要下载的页面内容来替换新页面中的内容，然后在调用新页面中的document.execCommand('SaveAs');方法来实现下载的功能，然而这个时候就有人问了，费那么大的劲干嘛，为什么不直接调用本页面的document.execCommand('SaveAs');来保存呢，那是因为我本页面中有使用JavaScript脚本新添加了数据，直接调用本页面中的document.execCommand('SaveAs');来保存只是原始的静态HTML页面，而动态添加的内容是不能下载的，so，只能打开新的页面，在将内容复制替换，从而间接调用document.execCommand('SaveAs');

注意：如果你仅仅需要下载静态网页内容，直接调用document.execCommand('SaveAs');就可以了，而不需要使用上述方法实现

下面贴出完整代码，如有错误，希望多多提示，谢谢！

代码：

$(".btnreport").click(function(){
var userAgent = navigator.userAgent;
var strContent = document.getElementsByTagName('html')[0].outerHTML;
if(userAgent.indexOf("MSIE") > -1){
var winName = window.open('', '_blank','');
winName.document.open('text/html', 'replace');
winName.document.write(strReportText);
winName.document.execCommand('SaveAs');
winName.close();
}else{
ExportFile("signinform.html", strReportText);
}
});

希望能够帮助到你，赞！