VUE项目实践——浏览器打印时canves打印预览空白问题
//浏览器打印<div @click="doPrint()">打印</div><div id="report-body" >内容<div>//打印doPrint: function() {let newstr = document.getEleme
·
//浏览器打印
<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 + '"/>';
},
更多推荐
已为社区贡献4条内容
所有评论(0)