vue-qriously 生成二维码并下载、cliploard复制粘贴

 

xxx.vue

<template>
    <a-modal
        class="dialogRecharge"
        title="活动链接及二维码"
        v-model="visible"
        width="520px"
        :destroyOnClose="true"
        :footer="null"
        @cancel="$emit('close')"
    >
        <a-tabs type="card" v-model="tabKey" @change="getUrl">
            <a-tab-pane tab="H5页面" key="1"></a-tab-pane>
            <a-tab-pane tab="微信小程序" key="2"></a-tab-pane>
            <a-tab-pane tab="抽奖大屏" key="3"></a-tab-pane>
        </a-tabs>

        <div class="codeBox">
            <div class="img">
                <qriously :id="'mycanvas' + tabKey" :value="dataObj.url" :size="180" />
            </div>
            <a-button class="download" @click="downqriousl('mycanvas' + tabKey)">下载二维码</a-button>
            <div class="copyLink">
                <a-input-search v-model="dataObj.url" placeholder="51hejia.com....">
                    <a-button slot="enterButton">复制链接</a-button>
                </a-input-search>
                <div class="btn" @click="Clip($event, dataObj.url)"></div>
            </div>
        </div>

    </a-modal>
</template>

<script>
import serviceMarketing from "@/service/marketing.js";
import Clipboard from 'clipboard';
export default {
    data() {
        return {
            // visible: true,
            visible: false,
            itemData: {},
            tabKey: '1',
            dataObj: {
                url: ''
            },
        };
    },
    created() {
    },
    methods: {
        Clip (event, text) {
            let self = this
            const clipboard = new Clipboard(event.target, {
                text: () => text
            });
            clipboard.on('success', () => {
                self.$message.success('复制成功')
                clipboard.off('error');
                clipboard.off('success');
                clipboard.destroy();
            });
            clipboard.on('error', () => {
                self.$message.error('复制失败，请刷新试试')
                clipboard.off('error')
                clipboard.off('success')
                clipboard.destroy()
            });
            clipboard.onClick(event);
        },
        downqriousl(id){
            console.log(id)
            const type = 'png'
            let canvas = document.getElementById(id).querySelector('canvas');
            let imgdata=canvas.toDataURL(type);
            //将mime-type改为image/octet-stream,强制让浏览器下载
            let fixtype=function(type){
                type=type.toLocaleLowerCase().replace(/jpg/i,'jpeg');
                let r=type.match(/png|jpeg|bmp|gif/)[0];
                return 'image/'+r;
            };
            imgdata=imgdata.replace(fixtype(type),'image/octet-stream');
            //将图片保存到本地
            let savaFile=function(data,filename)
            {
                let save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href=data;
                save_link.download=filename;
                let event=document.createEvent('MouseEvents');
                event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
                save_link.dispatchEvent(event);
            };
            let filename=''+new Date().getSeconds()+'.'+type;
            //用当前秒是解决重名的问题 不行就换成毫秒
            savaFile(imgdata,filename);
        },
        getUrl () {
            let self = this
            self.$get(serviceMarketing.lotteryUrl.apiUrl, {
                id: this.itemData.id,
                type: this.tabKey
            },(res => {
                if(res.statusCode && res.statusCode == "20000000"){
                    this.dataObj = res.data
                } else {
                    self.$message.error(res.reason,3);
                }
            }),serviceMarketing.lotteryUrl.domain);
        },
        modalOpen(itemData) {
            console.log(itemData)
            this.visible = true;
            this.itemData = itemData
            this.getUrl()
        }
    }
};
</script>

<style lang="less" scoped>
.codeBox {
    text-align: center;
    .img{
        width: 180px;
        height: 180px;
        margin: 35px auto 15px;
        // border:1px solid red;
        background: #f4f4f4;
        border-radius: 5px;
        canvas {
            width: 100%;
            height: 100%;
        }
    }
    .download {
        width: 180px;
        margin-bottom: 10px;
    }
    .copyLink {
        margin:35px 20px 15px; 
        position: relative;
        .btn{
            width: 90px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            cursor: pointer;
        }
    }
}
</style>

 

 

https://www.cnblogs.com/ruthless/p/9970133.html

 

https://segmentfault.com/a/1190000014875645

 

 

 

 

 

.