vue html2canvas qrcode生成二维码记录

"html2canvas": "1.0.0-rc.5",
   "qrcode": "^1.4.4",

<template>
    <div class="notification" style="padding-bottom: 78px;">
        <template v-if="detail">
            <!--  v-show="!dialogTableVisible" -->
            <div class="notification-wrapper" v-show="!dialogTableVisible">
                <div class="notification-img-box" ref="notificationWrapper">
                    <img
                        src="~@/assets/img/notication_bg.png"
                        alt=""
                        class="notication-img"
                        ref="noticationImg"
                    />
                    <div class="content">
                        <div class="company">汉源集团</div>
                        <div class="name-box">
                            <span class="name">小源</span>
                            <span class="tail">同学：</span>
                        </div>
                        <div class="welcome">
                            <div class="welcome-para">
                                <span>欢迎加入</span
                                ><span class="decoration"
                                    >{{ detail.noticeName || 'xxxx' }}
                                </span>
                                <span>课程！课程导师为</span>
                                <span class="decoration">{{
                                    detail.teacherNames || 'xxxx'
                                }}</span>
                                <span>老师。</span>
                            </div>
                            <div class="welcome-para welcome-para2">
                                期待与你一起助推中国餐饮，提升<br />行业幸福！
                            </div>
                        </div>
                        <div class="university-name">汉源餐饮大学</div>
                        <div class="date">{{ detail.receiveDateStr }}</div>
                    </div>
                    <div class="code">
                        <img :src="codeUrl" alt="" />
                    </div>
                    <!-- <div
                        class="img-block-mask"
                        :style="{ height: imgMaskHeight + 'px' }"
                    ></div> -->
                </div>
            </div>
            <div v-show="dialogTableVisible" class="img-box">
                <img :src="imgUrl" alt="" />
            </div>
            <!-- :style="{ height: imgMaskHeight + 'px' }" -->
            <div
                class="btn-box"
                v-if="detail.btnShow === 1"
                style="position:fixed;left: 0; b: 0;"
            >
                <div class="com-btn-box" @click="clickBox">
                    <button>{{ detail.btnText }}</button>
                </div>
            </div>
        </template>
        <loading :show="!detail"></loading>
    </div>
</template>

<script>
import { fetchNoticationPreview } from '@/api/portfolios'
import Loading from '@/components/Common/Loading'
import html2canvas from 'html2canvas'
import QRCode from 'qrcode'
export default {
    props: ['id'],
    data() {
        return {
            imgMaskHeight: 120, // 图片遮罩高度
            detail: null,
            dialogTableVisible: false,
            imgUrl: '',
        }
    },
    computed: {},
    created() {
        this.init()
    },
    components: {
        Loading,
    },
    mounted() {},
    methods: {
        async init() {
            let detail = await fetchNoticationPreview({
                admissionNoticeId: 27,
            })
            this.detail = detail
            this.change(detail.goUrl)
            // this.$nextTick(() => {
            //     setTimeout(() => {
            //         this.downloadCodeImg()
            //     }, 500)
            // })
        },
        change(url) {
            let canvas = document.createElement('canvas')
            canvas.width = '100%'
            canvas.height = '100%'
            QRCode.toCanvas(canvas, url, error => {
                if (error) {
                    console.log(error)
                } else {
                    this.codeUrl = canvas.toDataURL('image/jpeg')
                }
            })
        },
        downloadCodeImg() {
            // const scrollTop =
            // document.documentElement.scrollTop || document.body.scrollTop // 获取滚动轴滚动的长度
            let dom = this.$refs.notificationWrapper
            const width = dom.offsetWidth
            const height = dom.offsetHeight //包裹容器的高度
            window.pageYOffset = 0
            document.documentElement.scrollTop = 0
            document.body.scrollTop = 0
            html2canvas(dom, {
                width: width, //画布的宽度，即生成图片的宽度
                height: height, //画布的宽度，同上
                scrollY: 0, //生成的图片在画布上的偏移量，我这里加15的原因是让图片上下居中
                dpi: window.devicePixelRatio * 2, // 对应屏幕的dpi，适配高清屏，解决canvas模糊问题
                scale: 1, // 缩放
                useCORS: true, // 是否使用图片跨域，如何使本地图片不用配置
                allowTaint: true,
            }).then(canvas => {
                // canvas参数为生成的canvas的dom节点，可以对其进行dom操作
                // 下载功能
                // 设置a标签的download属性，点击a标签变为下载
                let dataURL = canvas.toDataURL('image/png')
                this.imgUrl = dataURL
                if (this.imgUrl !== '') {
                    this.dialogTableVisible = true
                }
            })
        },
        clickBox() {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.downloadCodeImg()
                }, 500)
            })
        },
    },
}
</script>
<style lang="scss" scoped>
@import '~@/styles/Portfolios/notification.scss';
.notification {
    position: relative;
    height: auto;
}
.btn-box {
    .com-btn-box {
        margin-top: 30px;
    }
}
.img-box {
    img {
        display: block;
        width: 100%;
        height: auto;
    }
}
</style>