vue生成二维码图片并且下载图片到本地

一、安装生成二维码插件qrcode.js

npm install --save qrcodejs2

二、封装组件

<template>
    <div>
        <div id="qrcode"></div>
    </div>
</template>
 
<script>
    // 二维码
    import QRCode from 'qrcodejs2' // 引入qrcode
    export default {
        name: 'test',
        mounted() {
            this.qrcode();
        },
        props: {
            width: {
                type: Number,
                default () {
                    return 200
                }
            },
            height: {
                type: Number,
                default () {
                    return 200
                }
            },
            // 二维码地址
            url: {
                type: String,
                default () {
                    return ''
                }
            }
        },
        methods: {
            qrcode() {
                let qrcode = new QRCode('qrcode', {
                    width: this.width,
                    height: this.height,
                    text: this.url,
                    colorDark: "#000",
                    colorLight: "#fff",
                })
            },
        }
    }
</script>
<style scoped>
    #qrcode {
        display: inline-block;
    }
 
    #qrcode img {
        width: 132px;
        height: 132px;
        background-color: #fff;
        padding: 6px;
    }
</style>

三、应用于页面

<template>
    <el-dialog :title="dialogTit" :visible.sync="dialogShow" width="360px" :wrapperClosable="false"
        :append-to-body="true" :modal-append-to-body="false">
        <el-container>
            <el-main>
                <div class="qrcodeCon">
                    <qrcode id="qrcode" :url="form.w_type_urlstring"></qrcode>
                </div>
                <div class="qrcodeUrl">{{form.w_type_urlstring}}</div>
                <div class="qrcodeDownload">
                    <el-button @click="downloadClick">下载二维码</el-button>
                </div>
            </el-main>
        </el-container>
    </el-dialog>
</template>
 
<script>
    import qrcode from '@/components/Qrcode'
 
    export default {
        data() {
            return {
                // 对话框
                dialogTit: '二维码',
                dialogShow: false,
                form: {},
                formLabelWidth: '100px',
 
                // 二维码url
                url: '',
            };
        },
        components: {
            qrcode,
        },
        mounted: function() {
            var _this = this;
            _this.$nextTick(() => {
                _this.$on('handleQrcode', function(row) {
                    _this.dialogShow = true;
                    _this.form = row;
                });
            });
        },
        methods: {
            // 下载二维码
            downloadClick() {
                // 先找到canvas节点下的二维码图片
                const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
                const img = document.getElementById('qrcode').getElementsByTagName('img')
                // 创建一个a节点
                const a = document.createElement('a')
                // 设置a的href属性将canvas变成png格式
                const imgURL = myCanvas[0].toDataURL('image/jpg')
                const ua = navigator.userAgent
                if (ua.indexOf('Trident') !== -1 && ua.indexOf('Windows') !== -1) { // IE内核 并且  windows系统 情况下 才执行;
                    var bstr = atob(imgURL.split(',')[1])
                    var n = bstr.length
                    var u8arr = new Uint8Array(n)
                    while (n--) {
                        u8arr[n] = bstr.charCodeAt(n)
                    }
                    const blob = new Blob([u8arr])
                    window.navigator.msSaveOrOpenBlob(blob, '下载' + '.' + 'png')
                } else if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
                    const blob = this.base64ToBlob(imgURL); //new Blob([content]);
                    const evt = document.createEvent("HTMLEvents");
                    evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
                    a.download = ' '; //下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
                    a.href = URL.createObjectURL(blob);
                    a.dispatchEvent(new MouseEvent('click', {
                        bubbles: true,
                        cancelable: true,
                        view: window
                    }));
                } else { // 谷歌兼容下载
                    img.src = myCanvas[0].toDataURL('image/jpg')
                    a.href = img.src
                    // 设置下载文件的名字
                    a.download = this.form.title + this.form.w_type_title + '二维码';
                    // 点击
                    a.click();
 
                    this.$message({
                        message: '下载成功，已保存到桌面',
                        type: 'success'
                    });
                }
            },
 
            // base64转blob
            base64ToBlob(code) {
                let parts = code.split(';base64,');
                let contentType = parts[0].split(':')[1];
                let raw = window.atob(parts[1]);
                let rawLength = raw.length;
                let uInt8Array = new Uint8Array(rawLength);
                for (let i = 0; i < rawLength; ++i) {
                    uInt8Array[i] = raw.charCodeAt(i);
                }
                return new Blob([uInt8Array], {
                    type: contentType
                });
            },
        },
    };
</script>
 
<style scoped>
    .el-container {
        max-height: 600px;
    }
 
    .qrcodeCon {
        text-align: center;
    }
 
    .qrcodeUrl {
        padding: 30px 0;
    }
 
    .qrcodeDownload {
        text-align: center;
    }
</style>