Vue使用QrcodeVue生成二维码并下载

生成二维码

1、安装qrcode.vue组件

npm install --save qrcode.vue

<template><div id="app"><qrcode-vue :value='value' :size='size'></qrcode-vue><br /></div>
</template><script>
//导入组件
import QrcodeVue from 'qrcode.vue'
export default {name: 'App',data() {return {value: '扫我！', //二维码内容size: 300, //二维码大小}},//导入组件components: {QrcodeVue,},
}
</script>

下载二维码

使用a标签的download实现下载功能。

<template><div id="app"><qrcode-vue :value='value' :size='size'></qrcode-vue><br /><button v-on:click="download()" id="download">下载</button></div>
</template><script>
import QrcodeVue from 'qrcode.vue'
export default {name: 'App',data() {return {value: '别扫我！',size: 300,}},components: {QrcodeVue,},methods: {download() {//获取canvas标签let canvas = document.getElementById('app').getElementsByTagName('canvas')//创建a标签let a = document.createElement('a')//获取二维码的url并赋值为a.hrefa.href = canvas[0].toDataURL('img/png')//设置下载文件的名字a.download = '二维码'//点击事件，相当于下载a.click()//提示信息this.$message.warn('下载中，请稍后...')},},
}
</script>