前端打印问题
需求:前端打印pdf文件
解决方案:调用浏览器的打印方法
浏览器打印无设置产生的问题:
1、浏览器打印默认显示页眉页脚
2、打印时背景无法预览
3、图表打印时空白
浏览器打印问题解决方案:
1、解决默认页眉页脚问题
<style type="text/css" media="print"> @page { size: auto; margin: 20mm; } </style>
2、解决背景无法预览问题
<style> @media print { .body-content { -webkit-print-color-adjust: exact; -moz-print-color-adjust: exact; -ms-print-color-adjust: exact; print-color-adjust: exact; } } </style>
3、解决图表打印空白问题:因打印时预览重新排版导致echars无法重新渲染,因此把渲染的好的图表生成图片就可解决此问题(浏览时显示canvas,打印时显示图片)
let mycanvas = document.getElementsByTagName('canvas')[0]
this.image = mycanvas.toDataURL({ backgroundColor: '#fff' });
4、实现前端打印
dyHandler () {
this.$refs.report.isshow = true
setTimeout(() => {
document.body.innerHTML = this.$refs.report.$refs.dyReport.innerHTML
window.print()
window.location.reload()
}, 1000)
},
注:指定打印区域片段,此时必须吊起强制刷新方法,不然方法事件不会重新加载