Vue 打印网页功能的研究

1.选择打印插件
介绍一款非常好的插件 https://github.com/xyl66/vueP…
使用方法插件的Readme说的很详细了。打印函数直接传入需要打印节点的ref即可。

2.纠正打印的内容位置
打印是从左边开始的,如果你网页是居中的,而且屏幕分辨率较大,则网页就会显示到右边。
我想到的办法,是在调用打印函数的时候,先把目标dom的样式改为左对齐,调完打印再改回来。考虑到vue修改节点不是立刻发生的,所以
打印在nextTick中处理。

3.打印样式问题
一部分css是不支持打印出来的。要是使用一些现成的UI框架,里面难免用到一些特殊的css,这样发生的问题就不好处理。所以在需要打印的界面,还是自己写样式吧。

    原文作者:生哥学前端
    原文地址: https://segmentfault.com/a/1190000020031856
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞