VUE项目实践——浏览器打印时canves打印预览空白问题

最新推荐文章于 2024-07-31 17:50:19 发布

Y_anCy

最新推荐文章于 2024-07-31 17:50:19 发布

阅读量3.7k

点赞数

分类专栏：全靠实践

本文链接：https://blog.csdn.net/Y_anCy/article/details/80984993

版权

全靠实践专栏收录该内容

4 篇文章 0 订阅

订阅专栏

//浏览器打印
<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 + '"/>';
},