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

最新推荐文章于 2023-01-06 14:08:54 发布

weixin_33758863

最新推荐文章于 2023-01-06 14:08:54 发布

阅读量275

点赞数

文章标签： json javascript ViewUI

原文链接：https://segmentfault.com/a/1190000017210203

版权

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

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

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

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

<style>
    @media print {
        .noprint {
            display: none;
        }
    }  
</style>

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

关注