vue中实现window.print()打印功能遇到的几个坑

之前做过打印pdf功能，现在是打印当前页面，使用window.print()可以打印，不过遇到的坑比较多，先给大家介绍下项目背景，我们使用vue+element UI这一套。
第一坑，点击打印按钮，会弹出预览打印的弹窗，原生的js打印会压缩页面，会打乱你之前的布局，这时候又是你头疼的时候，刚tm调好的样式，怎么又要调，不过再怎么发牢骚，工作还得继续，这时候需要我们手动去调整预览打印的弹窗的CSS样式。

此处的 #printMe1 表示当前要打印页面开始的div的id值。

第二坑，当你的打印预览弹窗的内容只有一页时，你一点击打印按钮，走到打印机跟前，神奇的事情发生了，这时候你一看，卧槽怎么还有一页白纸，当你回过头来看打印预览弹窗的时候，发现预览弹窗上显示两页，这时候你会在想，明明是一页内容怎么会打印两页呢？刚开始问题定位在js打印样式上面，各种修改样式，结果都是打印两页，百思不得其解，于是我翻遍了百度，有的帖子都翻了好几十遍了，都没能解决我的问题，但小编仍然坚持着，相信肯定会真相大白的。正当我垂头丧气的时候，突然脑袋里灵光一闪，小编开始删代码，这里删代码肯定不是要跑路，而是排查问题的一种思路，请大家不要多想，果不其然，还是逃不过本座的火眼金睛。

都是这个妖魔鬼怪在作祟。

vue中实现window.print()打印功能遇到的几个坑相关推荐

关于window.print打印分页功能
平常window.print分页一般打印时用到page-break-after:always; 打印的样式设置在 <style type="text/css" media=& ...
window.print()打印网页局部内容
用window.print()打印网页局部内容今天客户让添加个打印证照功能,直接用window.print()打印的是整个页面,而用以下方法就可以只打印证明了 <!--window.print ...
page-break-after:always；解决window.print打印断页问题——已解决
今天用户提出一个关于window.print()打印的问题: 如下图所示:在打印断页的部分,会出现数据打印不全的情况.打印预览与实际打印的情况还有有所区别. 注意一点:如果想要实现window.pri ...
指定window.print 打印区域
第一种方法:指定不打印区域使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 细如下: ? 1 2 3 <style media=print type=&q ...
VUE整合VUE-PRINT-NB实现前端打印功能
VUE整合VUE-PRINT-NB实现前端打印功能插件安装 npm install vue-print-nb --save 插件安装时最好在package.json中同时加入依赖信息,便于项目上其他 ...
使用window.print()打印局部页面，ifrme打印ie报错
问题: 使用window.print();打印页面,将不需要的数据隐藏,将需要的数据显示,打印完成之后将刚才隐藏的数据还原,显示的数据隐藏, 谷歌浏览器.部分ie能一气呵成, 火狐浏览器以及少数ie ...
vue中可编辑div添加@功能
简介 1.有默认值情况下,光标自动定位到最后 2.按@键,或者@+shift组合键,可添加被@姓名 3.可整体删除@姓名 4.在光标位置插入指定html元素如图所示源码(复制另存txt,修改.ht ...
在 vue 中使用 window.onresize及div的resize事件
项目场景: 如何在 vue 中使用 window.onresize 如何避免覆盖其它的 window.onresize 手动触发 window.onresize echarts 监听图表容器的大小并 ...
window.print打印指定div-打印网页指定区域
第一种方法:指定不打印区域使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 细如下: <style media=print type="text ...
Window Server 2008中开启Window Media Player功能
Window Server 2008中开启Window Media Player功能服务器管理器功能优质Windows音频视频体验打勾安装其它功能有: 桌面休验等.... the end ...

vue中实现window.print()打印功能遇到的几个坑

vue中实现window.print()打印功能遇到的几个坑

vue中实现window.print()打印功能遇到的几个坑相关推荐

最新文章

热门文章