vue打印window.print( )打印方法使用

直接调用window.print()方法会默认打印页面中body里的所有内容。有时候是不需要打印页面body里的所有内容的,而只是想打印一部分指定内容。接下来代码是重点

事件监听 

有两个事件可以监听到到打印事件,一个是beforeprint,一个是afterprint,分别表示打印事件触发前后。
这个事件在 IE6 就已经支持了,兼容大概是 Firefox、IE全支持, Chrome63+支持, Safari暂不支持

我们可在处理事件onbeforeprint() 将一些不需要打印的元素隐藏,和打印后的处理事件 onafterprint()放开隐藏的元素

 网上看这两个事件中可以去做一些操作,比如设置打印内容的一些样式做一些调整,但是我的代码没有在这两个事件中写也是生效的。如下是我的代码

 对form-bottom这个DOM元素打印前做了隐藏,以及给'NumStyle '  这个DOM字体颜色做了调整。

设置打印布局(横向、纵向、边距)

 去除浏览器默认页眉页脚

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

 参考文章链接   vue、js 打印 window.print()方法_gu_eu的博客-CSDN博客 

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值