jquery-qrcode生成二维码用bootstrap打印中遇到的问题解决方法

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元素显示二维码图片

在使用了图片来显示二维码后，变形、不显示、传输慢的问题统统都解决了~希望能给同样遇上这个问题的童鞋一点帮助。