生成二维码 并下载
npm i vue-qriously -S
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)
<qriously :id="'mycanvas' + index" :backgroundAlpha="1" value="http://dglw.hengguguoji.com/sh/h5invite/template1/" :size="150" />
<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);
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);
},