vue二维码生成和打印

二维码生成
存放二维码

<div id="qrCode" class="qrCode">
    <div id='code' class="code"></div>
    <canvas style="height: 250px;width: 250px;" id="canvas" class="canvas1"></canvas>
</div>

生成二维码

var canvas = document.getElementById('canvas')
// canvas.forEach(obj=>{
QRCode.toCanvas(canvas,zjhm, function (error) {
    if (error)
        window.console.error(error)
    window.console.log('QRCode success!');
});

打印二维码

doPrint(zjhm){
    var canvas = document.getElementById('canvas');
    var img1 = document.getElementById('qrCode').innerHTML;
    var img = canvas.toDataURL("image/png")
    document.getElementById('qrCode').innerHTML="<img id='img' src='" + img + "'>"
    var newWin = window.open(""); //新打开一个空窗口
    //根据div标签ID拿到div中的局部内容
    var jubuData = document.getElementById("qrCode").innerHTML;
    document.getElementById('qrCode').innerHTML=img1;
    var canvas1 = document.getElementById('canvas')
    // canvas.forEach(obj=>{
    QRCode.toCanvas(canvas1,zjhm, function (error) {
        if (error)
            window.console.error(error)
        window.console.log('QRCode success!');
    });
    //把获取的 局部div内容赋给body标签
    newWin.document.write(jubuData); //将图片添加进新的窗口
    newWin.document.close(); //在IE浏览器中使用必须添加这一句
    newWin.focus(); //在IE浏览器中使用必须添加这一句
    setTimeout(function() {
        newWin.print(); //打印
        newWin.close(); //关闭窗口
    }, 100);

},

二维码宽高的设置

#canvas{
    width: 250px!important;
    height: 250px!important;
}