需求:将页面中的内容打印到A4纸上
实现原理:将页面内容截图并添加到页面元素,使用htmlCanvas进行打印
html部分
被打印资源
<div id="print-wrap">
..内容
</div>
打印内容的暂存位置
<div id="reocrd-wrap">
<img id="screenShotImg" style="" />
</div>
js部分
function submitHandler(){
// 点击导出按钮
html2canvas(document.querySelector("#print-wrap")).then(function (canvas) {
//获取截取图片路径
var base64Url = canvas.toDataURL('image/png');
var oImg = new Image();
// 导出图片
oImg.src = base64Url;
document.getElementById("screenShotImg").src = base64Url;
oImg.onload=function(){
var newstr = document.getElementById("reocrd-wrap").innerHTML;
var printWindow = window.open();
printWindow.document.write(newstr);
printWindow.print();
document.getElementById('screenShotImg').setAttribute('src','')
}
});
}
需要htmlCanvs.js的支持 ,附上链接 http://html2canvas.hertzen.com/
将js复制到工程中并引入