打印modal框中在线生成的二维码

elva 发布于2019-08-23 13:49 / 3305人阅读

摘要：在网上搜了一些方法，做法是获取二维码元素赋值给整个的，然后再调用浏览器的打印功能，缺点是会改变整个页面，需要刷新恢复。但问题还不止于此，由于二维码是在线生成的，获取到的二维码元素没有实际内容，所以这个方法不可行。

二维码由jquery.qrcode.min.js将json字符串转换而成，细节不再赘述，效果如图：

调用浏览器打印功能（window.print()）时，会连同底层父页面中的活动列表一起叠加打印，效果很糟糕。

在网上搜了一些方法，做法是获取二维码dom元素赋值给整个dom的body，然后再调用浏览器的打印功能，缺点是会改变整个页面，需要刷新恢复。但问题还不止于此，由于二维码是在线生成的，获取到的二维码dom元素没有实际内容，所以这个方法不可行。

最终的解决办法如下：
底层父页面定义样式

在底层父页面的最外层元素标签中添加该样式，同样，modal框中的打印和关闭按钮也加上这个样式，直接调用浏览器打印功能就可以了，效果如图：

服务器托管 idc机房托管 jsp打印二维码域名生成二维码 php生成二维码 qrcode生成二维码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99615.html

在线编辑二维码并发送到热敏打印机打印

摘要：在线编辑使用到的插件根据信息绘制二维码插件用于颜色选择，绑定事件更改二维码的颜色用于将格式的二维码转换成的，之后使用方法生成二维码图片的编码数据，通过发送给后端热敏打印机打印二维码图片要转成格式。在线编辑使用到的 js 插件： qrcodesvg 根据信息绘制二维码插件 colorPicker 用于颜色选择，js绑定事件更改二维码（svg）的颜色 canvg ...

GHOST_349178 2019-06-27 10:27 评论0 收藏0
云服务器 ECS 建站教程：在ECS上部署数据库

摘要：在阿里云平台上，可通过自带的镜像市场实现一键部署系统的数据库，完美解决耗时长部署易出错的缺陷。操作步骤登录云服务器管理控制台。单击左侧导航中的云服务器创建实例。在ECS上部署数据库数据库是依照某种数据模型组织起来并存放二级存储器中的数据集合。这种数据集合具有如下特点：尽可能不重复，以最优方式为某个特定组织的多种应用服务，其数据结构独立于使用它的应用程序，对数据的增、删、改和检索由统一软件进...

stefan 2019-04-24 19:24 评论0 收藏0
【开源】合摩 WeexBox 正式发布

摘要：目前团队使用已研发了好几款，它能满足及支撑我们上百个页面的业务场景，让我们的开发效率大大提升，使我们的技术栈更加完善。最后希望我们的方案能帮助开发中的你。 showImg(https://segmentfault.com/img/remote/1460000017460300?w=2166&h=2166); WeexBox 一套简洁高效的APP混合开发解决方案写在开头 WeexBox...

Karuru 2019-06-25 12:32 评论0 收藏0
【开源】合摩 WeexBox 正式发布

摘要：目前团队使用已研发了好几款，它能满足及支撑我们上百个页面的业务场景，让我们的开发效率大大提升，使我们的技术栈更加完善。最后希望我们的方案能帮助开发中的你。 showImg(https://segmentfault.com/img/remote/1460000017460300?w=2166&h=2166); WeexBox 一套简洁高效的APP混合开发解决方案写在开头 WeexBox...

baukh789 2019-06-25 17:05 评论0 收藏0
【开源】合摩 WeexBox 正式发布

摘要：目前团队使用已研发了好几款，它能满足及支撑我们上百个页面的业务场景，让我们的开发效率大大提升，使我们的技术栈更加完善。最后希望我们的方案能帮助开发中的你。 showImg(https://segmentfault.com/img/remote/1460000017460300?w=2166&h=2166); WeexBox 一套简洁高效的APP混合开发解决方案写在开头 WeexBox...

BakerJ 2019-08-23 14:11 评论0 收藏0