html2canvas將網頁轉化為圖片
阿新 • • 發佈:2018-12-29
html2canvas將網頁轉化為圖片,可以利用如下程式碼
'click a.actionPDF'(e, instance) { e.preventDefault(); const _this = $(e.currentTarget); const { itemName } = instance.match.get(); $.showLoading(); html2canvas($("#capture")).then(canvas => { // document.body.appendChild(canvas) var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 獲取生成的圖片的url // window.location.href= imgUri; // 下載圖片 // var anchorElem = document.createElement("a"); // anchorElem.style = "display: none"; // anchorElem.href = imgUri; // anchorElem.download = itemName+".png"; // document.body.appendChild(anchorElem); // anchorElem.click(); // document.body.removeChild(anchorElem); setTimeout(function () { $.hideLoading(); downloadBrowser(itemName + ".png", imgUri); // window.URL.revokeObjectURL(imgUri); }, 1000); }); },
也許會出現報錯
Provided element is not within a Document;
發生這個錯誤的本質原因是在呼叫html2canvas的時候傳遞的是jQuery物件,而不是DOM原生物件。