前端打印问题

需求：前端打印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)
    },

 

注：指定打印区域片段，此时必须吊起强制刷新方法，不然方法事件不会重新加载