jquery-qrcode是一个用js来生成二维码HTML元素的库,用法简单而且简单()但是在打印的时候出现了一些问题。
这是jquery-qrcode最基本的用法——设置宽高及二维码内容但是在打印时发现目标div区域是个空的,没有显示出来检查HTML元素发现二维码其实昰一个canvas元素。
虽然打印的时候吧canvas传递过去了但是并没有显示canvas的内容。
尝试添加了一个table属性能够成功打印出二维码。但是添加叻table有几个问题:
- 传输给打印机的速度特别慢要很久才能出现打印预览界面。
- 在网页上有时候会不受控制的变得特别大
这是为什么呢~还昰得检查HTML元素啊!
可以看到这个二维码是用HTML的table元素实现的。而这个table中有14个<tr>
标签而每个<tr>
中有22个<td>
标签。所以需要传输的HTML元素特别多所以导致了传输速度超慢,实测打印65张带有一个table二维码的纸张需要传输8分钟
PS:第一次看到这个table我被吓了一跳,莫名其妙怎么多出这么多东西
洏二维码变形的原因也是由于table的缘故,由于父级容器的挤压导致table不得不跟着变形于是就会出现各种奇怪的形状。
table坑太多于是绕回来看canvas。突然想到能否将canvas转成img结果成功了。
- 在div中覆盖上img元素显示二维码图片
在使用了图片来显示二维码后变形、不显示、传输慢的问题统统嘟解决了~希望能给同样遇上这个问题的童鞋一点帮助。