Vue使用QrcodeVue生成二维码并下载的示例代码
作者：A_ugust__
这篇文章主要给大家介绍了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.href
a.href = canvas[0].toDataURL('img/png')
//设置下载文件的名字
a.download = '二维码'
//点击事件，相当于下载
a.click()
//提示信息
this.$message.warn('下载中，请稍后...')
},
},
}
</script>到此这篇关于Vue使用QrcodeVue生成二维码并下载的示例代码的文章就介绍到这了,更多相关Vue QrcodeVue生成二维码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！