生成二维码
2020-06-11 本文已影响0人
_undefined
引入依赖
import VueQr from 'vue-qr' // 生成二维码
import FileSaver from 'file-saver' // 下载二维码
template
// ...
<template v-if="isShowQRcode">
<vue-qr :title="QRCodeUrl" :text="QRCodeUrl" :size="125" :margin="5" :callback="QRcodeSuccess"></vue-qr>
<el-button class="qrcode-download" size="mini" type="primary" @click="QRcodeDownload">
下载
</el-button>
</template>
// ...
script
// ...
components: {
VueQr,
},
// ...
data() {
return {
isShowQRcode: false,
QRCodeUrl: 'https://www.baidu.com/',
QRcodeData: '',
}
},
// ...
methods: {
// 二维码生成回调base64
QRcodeSuccess(data) {
this.QRcodeData = data
},
// 下载
QRcodeDownload() {
FileSaver.saveAs(this.QRcodeData, '下载名');
}
}
// ...
不使用 <a href="xxx" download="xxx"></a> 因为base64过长，造成点击a标签时无反应
