前端打印问题

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

 

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

 

posted @ 2020-07-13 15:06  总有diao民想害朕  阅读(18)  评论(0编辑  收藏