window.print() 前端实现网页打印

window.print() 前端实现网页打印,将 DOM 中的 canvas 转为 image

• window.print()用于打印当前窗口的内容,默认打印页面 body 里的所有内容

打印样式问题,之前调整好的样式和布局都没实现,那么怎么解决呢?

1.使用打印样式表

配置一份打印样式表 print.css，引入到 HTML 文档，在 上加上一个 media=”print” 来标识这是打印机才会应用的样式表，这样打印的时候，就会默认将该样式表应用到文档中

<link href="/path/print.css" media="print" rel="stylesheet" />

2.使用媒体查询

@media print {  
    h1 {  
        font-size: 20px;  
        color: red;  
    }  
}

打印指定区域的内容

printpage () {  
    // const oldInnerHtml = window.document.body.innerHTML  
    window.document.body.innerHTML = this.$refs.reportDetailRef.innerHTML  
    window.print()  
    window.location.reload()  
    // window.document.body.innerHTML = oldInnerHtml  
    return false  
},

打印样式中的分页问题

1.page-break-before（指定元素前添加分页符）

值	描述
auto	默认值,如果必要则元素前面插入分页符
always	在元素前插入分页符
avoid	避免在元素前插入分页符
left	在元素之前足够的分页符，一直到一张空白的左页为止
right	在元素之前足够的分页符，一直到一张空白的右页为止。
inherit	规定应该从父元素继承 page-break-before 属性的设置。

2.page-break-after（指定元素后添加分页符）

值	描述
auto	默认值。如果必要则在元素后插入分页符。
always	在元素后插入分页符。
avoid	避免在元素后插入分页符。
left	在元素之后足够的分页符，一直到一张空白的左页为止。
right	在元素之后足够的分页符，一直到一张空白的右页为止。
inherit	规定应该从父元素继承 page-break-after 属性的设置。

去除浏览器默认页眉页脚

页眉打印默认有页眉页脚信息，展现到页面外边距范围，我们可以通过去除页面模型 page 的外边距，使得内容不会延伸到页面的边缘，再通过设置 body 元素的 margin 来保证 A4 纸打印出来的页面带有外边距

@media print {  
    @page {  
        margin: 0;  
    }  
    body {  
        margin: 1cm;  
    }  
}

遇到了 window.print() 导出时，内容区域有 echarts 图表，图表区域是个 canvas，导出后的 pdf 文件中 canvas 区域空白—>>>>>>>解决方法,获取 dom 中的 canvans,转成 img

1.获取到所有 canvans 的 dom

2.对应 echarts canvans 的位置创建 div,并通过 ref 拿到 dom

3.通过 canvans 的 toDataURL 方法吧 canvas 转成 img

GeneratepPicture() {
  this.fullscreenLoading = true
  const mainCanvas = document.getElementsByTagName('canvas')
  for (let i = 0; i < mainCanvas.length; i++) {
    const item = mainCanvas[i]
    const imgRef = this.$refs['canvans' + i]
    const mainImg = new Image()
    const mainImgSrc = item.toDataURL('image/png')
    mainImg.src = mainImgSrc
    mainImg.onload = () => {
      // 用图片替换 canvas
      imgRef.innerHTML = `<img style="   width: 100%;height: 100%;" src=${mainImgSrc}>`
    }
  }
}

使 img 自适应 div 大小例子

div {
  width: 400px
  height: 400px
  border: 1px solid #000
}
img {
  width: 100 %
  height: 100 %
}

vue-router 新窗口打开

1. router-link  
2.window.open()  
3.a标签  
  
const routeUrl = this.$router.resolve({  
path: '/reportDetail',  
query: row  
})  
window.open(routeUrl.href, '_blank')