将代码转为图片

	<div id="card">
                <div >
                    长按识别图中二维码 <br>
                    参与活动
              </div>
        </div>

id 里面的内容是你要打印的内容，样式自己去修改

以下的代码，是显示打印的弹框层的效果

 <div :style="{display:showimg?'block':'none'}" @click="showimg=false"
            style="position: absolute;width: 100vw;height: 100vh;background:rgba(0,0,0,0.47);top: 0;left: 0;z-index: 2;">
            <div style="position:absolute;padding:30px;box-sizing: border-box;top:0;left:0;">
                <div class="img"></div>
            </div>
        </div>

设置按钮，点击生成

 <div class="btns" @click="generateItem">
                生成海报
            </div>

vue写的代码，判断显示，
函数方法

 generateItem() {
                    let that = this
                    //创建一个新的canvas
                    var canvas2 = document.createElement("canvas");
                    //获取宽高
                    var w = $('#card').width();
                    var h = $('#card').height();
                    canvas2.width = w * 2;
                    canvas2.height = h * 2;
                    canvas2.style.width = w + "px";
                    canvas2.style.height = h + "px";
                    var context = canvas2.getContext("2d");
                    context.scale(2, 2);
                    html2canvas(document.querySelector('#card'), {
                        useCORS: true,
                        foreignObjectRendering: true,
                        allowTaint: true,
                        scale: 2,
                        width: w,
                        height: h,
                        canvas: canvas2,
                    }).then(function (canvas) {
                    //将图片的地址转为base64
                        var dataUrl = canvas.toDataURL();
                        将这个图片的地址，给到页面上
                        var newImg = document.createElement("img");
                        newImg.src = dataUrl;
                        newImg.style.width = w / 2;
                        newImg.style.height = 480 + 'px';
                        $('.img').html(newImg)
                        that.showimg = true;
                    });
                },