jquery-qrcode生成二维码用bootstrap打印中遇到的问题解决方法
来源:互联网 发布:baidu.com淘宝 编辑:程序博客网 时间:2024/06/05 07:52
jquery-qrcode是一个用js来生成二维码HTML元素的库,用法简单而且简单(Github 地址)。但是在打印的时候出现了一些问题。
二维码打印不显示
代码如下:
<div class="qrcode"></div>
$('.qrcode').empty();jQuery('.qrcode').qrcode({ text: "hello world", width: 40, height: 40});
这是jquery-qrcode最基本的用法——设置宽高及二维码内容。但是在打印时发现目标div区域是个空的,没有显示出来。检查HTML元素发现二维码其实是一个canvas元素。
<div class="qrcode"> <canvas width="40" height="40"></div>
虽然打印的时候吧canvas传递过去了,但是并没有显示canvas的内容。
解决方法
添加table属性
尝试添加了一个table属性,能够成功打印出二维码。但是添加了table有几个问题:
- 传输给打印机的速度特别慢,要很久才能出现打印预览界面。
- 二维码容易变形。
- 在网页上有时候会不受控制的变得特别大。
这是为什么呢~还是得检查HTML元素啊!
<div class="qrcode"> <table> <tbody> <tr> <td> ... </td> </tr> </tbody> </table></div>
可以看到这个二维码是用HTML的table元素实现的。而这个table中有14个<tr>
标签,而每个<tr>
中有22个<td>
标签。所以需要传输的HTML元素特别多,所以导致了传输速度超慢,实测打印65张带有一个table二维码的纸张需要传输8分钟。
PS:第一次看到这个table我被吓了一跳,莫名其妙怎么多出这么多东西。
而二维码变形的原因也是由于table的缘故,由于父级容器的挤压导致table不得不跟着变形,于是就会出现各种奇怪的形状。
解决方法
table坑太多,于是绕回来看canvas。突然想到能否将canvas转成img,结果成功了。
$('.qrcode').empty();jQuery('.qrcode').qrcode({ text: ZYH, //render: "table", width: 40, height: 40});var canvas = $('.qrcode canvas')var img = canvas[0].toDataURL("image/png")$('.qrcode').html("<img src='" + img + "'>")
- 用jquery-qrcode生成canvas
- 将canvas转成图片
- 在div中覆盖上img元素显示二维码图片
在使用了图片来显示二维码后,变形、不显示、传输慢的问题统统都解决了~希望能给同样遇上这个问题的童鞋一点帮助。
0 0
- jquery-qrcode生成二维码用bootstrap打印中遇到的问题解决方法
- 用QRCode方法生成二维码
- jquery.qrcode生成二维码
- jquery.qrcode生成二维码
- jquery-qrcode生成二维码
- jquery.qrcode 生成二维码
- jquery-QRCode生成二维码
- jQuery.qrcode生成二维码
- 用jquery.qrcode.js生成高大尚的二维码
- jquery-qrcode生成带logo的二维码
- 用QRCode.js制作二维码的生成器(qrcode.makeCode方法生成二维码)
- 使用jquery.qrcode生成二维码
- 使用jquery.qrcode生成二维码
- 使用jquery.qrcode生成二维码
- 使用jquery.qrcode生成二维码
- 使用jquery-qrcode生成二维码
- 使用jquery.qrcode生成二维码
- 使用jquery-qrcode生成二维码
- Dagger2-深入三(mvp结合使用)
- 微信扫描支付模式二(CI框架)
- 欢迎使用CSDN-markdown编辑器
- 微信公众号oAuth2.0授权问题总结
- ext4.0 表格分组和分组数量
- jquery-qrcode生成二维码用bootstrap打印中遇到的问题解决方法
- ulimit详解
- iOS UIAlertController 的常用方法
- 解决因为第三方包Volley、KJFrameForAndroid、OKHttp、BaiduPush等用了Java 和 kotlin 的混合编译,导致5.0以下的机器无法运行
- 如何从 0 到 1 开发一款完整的直播 APP
- 移动端下拉刷新、上拉加载更多插件dropload
- Android上使用camera拍照,把获取的照片上传到远程服务器
- Linear Algebra - Lesson 10. 四个基本子空间
- CSS中的display和visibility属性