html產生圖片並儲存到本地方法（Windows）

標籤：htm   filename   問題   https   com   nbsp   end   oda   div   

// 最近用到一個儲存html為圖片到本地的功能（儲存到下載目錄），記之，該功能IE使用Blob 儲存體資料，關於相容性問題參見如下表格，其他瀏覽器使用a標籤download屬性新功能下載

Browser	Constructs as	Filenames	Max Blob Size	Dependencies
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

 

html產生圖片並儲存到本地方法（Windows）