業務需求：按照客戶要求把排課表轉化為圖片下載到本地。一個月到排課有很多。所以圖片會很大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html2canvas_download</title> <style> </style> </head> <body> <div id="image" style="width: 300px; height: 300px; margin: 10px; background: red; border: 5px solid gray;"> <h1>hello world!</h1> <h3>內容超級多，高度可能是一萬多像素</h3> </div> <div id="imageExport">down</div> </body> <!--<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>--> <script src="/canvastohtml/canvasToHtml.js"></script> <script type="text/javascript"> $("#imageExport").click(function () { initExportImage(); }); function initExportImage() { //要導出的html的內容 var oDiv = document.getElementById('image'); html2canvas(oDiv).then(function (canvas) { /* 1. 創建要導出的html的容器 let htmlElement = document.createElement('div'); htmlElement.id = 'imageExportDiv'; htmlElement.style.display = 'none'; document.body.appendChild(htmlElement); //把要導出的html轉化為canvas,然后渲染到容器中，實際導出的圖片就是我的容器中的canvas document.getElementById("imageExportDiv").appendChild(canvas); */
/* var strDataURI = canvas.toDataURL('image/jpeg',0.1);//調小就可以了.圖片太大總是發生網絡錯誤的問題 downLoadFn(strDataURI);*/ /*2。下載圖片，圖片的大小比較小 推薦使用*/ downloadFile(canvas.toDataURL('image/png',1),"aa.png") }); } /*解碼后轉化為blob使用，可以把base64的大文件變為小文件，下載就不會出現錯誤了*/ function downloadFile(content, fileName) { //下載base64圖片 var base64ToBlob = function(code) { let parts = code.split(';base64,'); let contentType = parts[0].split(':')[1]; let raw = window.atob(parts[1]); let rawLength = raw.length; let uInt8Array = new Uint8Array(rawLength); for(let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], { type: contentType }); }; let aLink = document.createElement('a'); let blob = base64ToBlob(content); //new Blob([content]); let evt = document.createEvent("HTMLEvents"); evt.initEvent("click", true, true); //initEvent 不加后兩個參數在FF下會報錯 事件類型，是否冒泡，是否阻止瀏覽器的默認行為 aLink.download = fileName; aLink.href = URL.createObjectURL(blob); //aLink.click();
aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
};
function downLoadFn(url) { if (myBrowser() === "IE" || myBrowser() === "Edge") { SaveAs5(url); } else { download(url); } } //判斷瀏覽器類型 function myBrowser() { var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (isOpera) { return "Opera" } ; //判斷是否Opera瀏覽器 if (userAgent.indexOf("Firefox") > -1) { return "FF"; } //判斷是否Firefox瀏覽器 if (userAgent.indexOf("Chrome") > -1) { return "Chrome"; } if (userAgent.indexOf("Safari") > -1) { return "Safari"; } //判斷是否Safari瀏覽器 if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { return "IE"; } ; //判斷是否IE瀏覽器 if (userAgent.indexOf("Trident") > -1) { return "Edge"; } //判斷是否Edge瀏覽器 } //IE瀏覽器圖片保存本地 function SaveAs5(imgURL) { var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000"); for (; oPop.document.readyState != "complete";) { if (oPop.document.readyState == "complete") break; } oPop.document.execCommand("SaveAs"); oPop.close(); } // chrome14+,firefox20+,pera15+,Edge 13+,Safari未實現 function download(strDataURI) { //創建一個下載的a標簽 var link = document.createElement('a'); //設置a標簽的文字<a>下載</a> link.innerHTML = '導出'; //下載的圖片的名稱 link.download = 'coursePlan.png'; link.id = 'aa'; //a標簽的點擊事件 link.addEventListener('click', function (ev) { link.href = strDataURI; }, false); //$("#imageExport").html(link);//可以把創建的a標簽放到指定的標簽中 //直接下載，文件圖片太大會出現問題,出現網絡問題，下載出錯 link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐 //link.click();//直接點擊也可 }; </script> </html>
ps:使用時候出現的問題
粉色部分代碼使用暫時沒有遇到問題
綠色部分使用會出現問題，如果轉換下載的圖片 71M 使用了base64的圖片下載，下載的圖片就很大，具體原因未知。每次都會出現問題，下不下來。
下載失敗 網絡問題
圖片有時候下載出來，底部的一部分數據會消失
這個問題是因為圖片太大還沒有渲染完，如果想要下載完成的圖片，需要拉動滑動條，看到完成的圖片，然后等等不要頁面加載完，就下載，需要等一會10秒或者等等，才可以下載完整圖片