Vue-打印网页功能的研究

31次阅读

共计 308 个字符,预计需要花费 1 分钟才能阅读完成。

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

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

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

正文完
 0