基于vue + elementUI 实现 下载二维码图片, 复制二维码链接到剪贴板, 复制二维码图片到剪贴板功能

基于vue + elementUI 实现 下载二维码图片, 复制二维码链接到剪贴板, 复制二维码图片到剪贴板功能

1. 安装依赖

  npm install vue@2.7.16
  npm install element-ui
  npm install vue-clipboard2
  npm install html2canvas
  npm install vue-qr

2. 代码

<template>
    <div class="tip">
        <el-dialog
            title="邀请二维码"
            :visible.sync="dialogVisible"
            width="600px">

            <div class="content">
                <div class="msg">链接地址</div>
                <div class="link">
                    <div class="linkUrl">{{ formMsg.linkUrl }}</div>
                    <el-button type="primary" v-clipboard:copy="formMsg.linkUrl"
                               v-clipboard:success="copySuccess" v-clipboard:error="copyError">复制链接</el-button>
                </div>

                <div class="msg">二维码</div>
                <vue-qr class="qr" :text="formMsg.linkUrl" :value="formMsg.linkUrl" :size="90" :margin="0"></vue-qr>
                <div>
                    <el-button type="text" @click="downImg">下载</el-button>
                    <span class="separator">|</span>
                    <el-button type="text" @click="copyImg">复制</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import VueQr from 'vue-qr'
import html2canvas from 'html2canvas'

export default {
    components: {
        VueQr
    },

    data() {
        return {
            dialogVisible: true,
            formMsg: {
                linkUrl: 'https://baidu.com/'
            }
        }
    },

    methods: {
        copySuccess(e) {
            console.log("copySuccess:", e);
            this.$message.success('复制链接成功！')
        },

        copyError(e) {
            console.log("copyError:", e);
            this.$message.error('复制链接失败!');
        },

        /**
         * 下载二维码图片
         */
        downImg() {
            const img = document.getElementsByClassName('qr')[0]
            html2canvas(img).then((canvas) => {
                const dataUrl = canvas.toDataURL();
                const link = document.createElement('a')
                link.download = '二维码.jpg'
                link.href = dataUrl
                link.style.display = 'none'
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            })
        },

        /**
         * 复制二维码图片
         */
        copyImg() {
            const img = document.getElementsByClassName('qr')[0]
            html2canvas(img).then((canvas) => {
                // 将canvas转为blob对象
                canvas.toBlob((blob) => {
                    // 将blob对象放入剪切板item中
                    // eslint-disable-next-line no-undef
                    const data = [new ClipboardItem({ [blob.type]: blob })];
                    // 写入剪切板,成功会执行resolve,失败则走reject
                    navigator.clipboard.write(data).then(() => {
                        this.$message({
                            message: '已保存到粘贴板',
                            type: 'success',
                            duration: 1000,
                        });
                    }, () => {
                        this.$message({
                            message: '保存截图失败',
                            type: 'warning',
                            duration: 1000,
                        });
                    });
                }, 'image/png');
            });
        }
    }
}
</script>

实现功能效果如下: