//浏览器打印
<div @click="doPrint()">打印</div>
<div id="report-body" >内容<div>

//打印
doPrint: function() {
	let newstr = document.getElementById('report-body').innerHTML;
	let oldstr = document.body.innerHTML;
	document.body.innerHTML = newstr;
	window.print();
	document.body.innerHTML = oldstr;
	window.location.reload() //解决打印取消  返回页面鼠标失效,不能继续打印
}


//canvas打印预览时空白:解决方案,把canvas转为图片
<!--扇形进度条 图片格式-->
<div id="canvas-Img"></div>
<!--扇形进度条 canvas格式-->
<canvas id = "canvasId"
	width = '320'
	height = '158'
	style = "width: 96%;display: none;" > < /canvas>

//canvas转Imgages解决打印 扇形进度条空白bug
generentCanvas: function(totalScoreLast, totalScore, canvasId) {
	response.GenerentCanvas(totalScoreLast, totalScore, canvasTotal); //扇形进度条
	let imgId = document.getElementById('canvas-Img');
	let canvas = document.getElementById('canvasId');
	let dataURL = canvas.toDataURL("image/png"); //转图片  隐藏canvas
	imgId.innerHTML = '<img style="width: 320px;height: 158px;" src="' + dataURL + '"/>';
},


 

Logo

前往低代码交流专区

更多推荐