html生成图片并保存到本地方法（Windows）

// 最近用到一个保存html为图片到本地的功能（保存到下载目录），记之，该功能IE使用Blob 存储数据，关于兼容性问题参见如下表格，其他浏览器使用a标签download属性新功能下载

BrowserConstructs asFilenamesMax Blob SizeDependencies

Firefox 20+
Blob
Yes
800 MiB
None

Firefox < 20
data: URI
No
n/a
Blob.js

Chrome
Blob
Yes
500 MiB
None

Chrome for Android
Blob
Yes
500 MiB
None

Edge
Blob
Yes
?
None

IE 10+
Blob
Yes
600 MiB
None

Opera 15+
Blob
Yes
500 MiB
None

Opera < 15
data: URI
No
n/a
Blob.js

Safari 6.1+*
Blob
No
?
None

Safari < 6
data: URI
No
n/a
Blob.js

 
 
// 步骤一：引入html2canvas.js  
//步骤二：完成以下方法即可
function downloadForJS(){
　　//使用html2canvas 转换html为canvas
　　html2canvas($("#ID")).then(function(canvas) { 
　　　　if(IE){  //判断IE下保存方法
    　　	　　 var blob = canvas.msToBlob();
   　　 　　	window.navigator.msSaveBlob(blob, fileName);
　　　　}else{//其他浏览器保存方法
		　　　　　var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url 　
　　　　  var saveLink = document.createElement( 'a');
   　　 　　	saveLink.href =imgUri;
　　　　  saveLink.download = fileName; saveLink.click();
　　　　}
 });
}
 
更多兼容性问题参考：https://github.com/eligrey/FileSaver.js