vue打印window.print( )打印方法使用
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
直接调用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博客




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:9 个月前 )
9e887079
[skip ci] 7 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 11 个月前
更多推荐
所有评论(0)