vue2.x 实现生成海报(带二维码)并且下载

1.安装依赖

cnpm install qrcodejs2 --save
cnpm install html2canvas --save

2.template部分 是v-show="false" 隐藏的 随便放什么位置
想显示出来就不需要隐藏

        <div>
            <!-- 海报html元素 -->
            <div id="posterHtml" :style="{backgroundImage: 'url('+posterHtmlBg+')'}" style="background-repeat: no-repeat;background-size: 1125px 2000px;width: 1125px;height: 2000px;" v-show="false">
                <div>{{posterContent}}</div>
                <!-- 二维码 -->
                <div><div id="qrcodeImg"></div></div>
            </div>
        </div>

data部分

                posterContent: '', // 文案内容
                posterImg: '', // 最终生成的海报图片
                posterImgName: '宣传海报', // 最终生成的海报图片名称
                posterHtmlBg: require('../../../assets/images/xchb.png'), // 背景图

3. methdos部分

            createQrcode (text) {
                // 生成二维码
                const qrcodeImgEl = document.getElementById('qrcodeImg')
                let qrcode = new QRCode(qrcodeImgEl, {
                    width: 285,
                    height: 285,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                })
                qrcode.makeCode(text)
            },
            createPoster () {                //click 点击按钮生成海报
                // 生成海报
                const vm = this
                const domObj = document.getElementById('posterHtml')
                html2canvas(domObj, {
                    useCORS: true,
                    allowTaint: false,
                    logging: false,
                    letterRendering: true,
                    onclone (doc) {
                        let e = doc.querySelector('#posterHtml')
                        e.style.display = 'block'
                    }
                }).then(canvas => {
                    // 在微信里,可长按保存或转发
                    vm.posterImg = canvas.toDataURL('image/png')
                    vm.imgDown(vm.posterImg)
                })
            },
            // 保存图片到本地
            imgDown (img) {  
                var alink = document.createElement('a')
                alink.href = img
                alink.download = this.posterImgName // 图片名
                alink.click()
            }

生命周期中或者请求接口中使用 进页面就生成二维码

    mounted() {
      this.createQrcode('www.baidu.com')               //这里放的是二维码地址
}

4. style部分

        #qrcodeImg{           //控制二维码位置  自己调整
            transform: translate(376px, 496px)!important;
        }

不懂就问