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原生对象。