html2canvas 瀏覽器端截屏並下載保存（兼容IE）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta3/html2canvas.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/canvas2image.js"></script> -->
<!-- <script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script> -->
<style>
a {
cursor: pointer;
color: rgb(85, 26, 139);
text-decoration: underline;
}
</style>
</head>
<body>
<div id="content" style="width: 300px; height: 300px; margin: 10px; background: red; border: 5px solid gray;">
<h1>hello html2canvas!</h1>
</div>
<script>
$("#content").on("click", function (event) {
event.preventDefault();
var userAgent = navigator.userAgent;
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
html2canvas($('#content'), {
allowTaint: true,
taintTest: false,
useCORS:true,//火狐瀏覽器添加項
onrendered: function (canvas) {
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var userAgent = navigator.userAgent;
//判斷是否是IE11
debugger
if(-1 !== userAgent.indexOf("Trident")){
var arr = image.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
window.navigator.msSaveBlob(new Blob([u8arr], {type:mime}), "download.png");
}else{
canvas.id = "mycanvas";
//生成base64圖片數據
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
var a = $("<a></a>").attr("href", dataUrl).attr("download", "img.png");
$("body").append(a);//火狐瀏覽器添加項
a[0].click();
a.remove();
}
}
});
});
</script>
</body>
</html>
網上看了很多，但是，大多數沒有解決掉IE兼容性問題，參考1中完美解決了，感謝網友們的分享。
參考1：https://blog.csdn.net/p312011150/article/details/78930875
參考2：https://blog.csdn.net/u012246064/article/details/78032450
參考3：https://blog.csdn.net/yxys01/article/details/78217428