vue-qriously 生成二维码 并下载二维码

生成二维码 并下载

// 生成二维码
npm i  vue-qriously -S
// main.js
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)
//value 访问的地址    backgroundAlpha 背景透明   size宽
<qriously :id="'mycanvas' + index" :backgroundAlpha="1"  value="http://dglw.hengguguoji.com/sh/h5invite/template1/" :size="150" />

// 下载二维码
// downloadCode(id,'test.png')

<el-button size="mini" @click="downloadCode('mycanvas' + index,`${item.name}.png`)">下载图片</el-button>

  // 下载二维码
            downloadCode(id, filename) {
                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);
                };
                //用当前秒是解决重名的问题 不行就换成毫秒
                savaFile(imgdata, filename);
            },