1. 第一种情况将链接生成二维码图片并实现下载
效果图:
node下载qrcodejs2并引入
import QRcode from 'qrcodejs2'
设置一块区域显示图片
<div class="qr-dialog">
<div v-if="visible" id="qrcode" ref="qrcode" class="qrcode" />
<div class="qr-button">
<el-button @click="onDownload">下载</el-button>
</div>
</div>
创建QRcode
createQRImage(url) {
this.$nextTick(() => {
new QRcode(this.$refs['qrcode'], {
width: 182,
height: 182,
text: url
})
})
}
监听模块,创建QRcode
watch: {
visible: {
handler: function(newValue) {
if (this.visible === true) {
this.createQRImage(this.url)
}
},
deep: true,
immediate: true,
imgUrl: ''
}
}
实现下载
onDownload() {
const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
const a = document.createElement('a')
a.href = myCanvas[0].toDataURL('img/png')
console.log('a.href', a.href)
a.download = '二维码'
a.click()
}
全部代码:
<template>
<el-dialog
title="二维码"
:visible.sync="visible"
:url.sync="url"
:before-close="onClose"
width="800px"
>
<div class="qr-dialog">
<div v-if="visible" id="qrcode" ref="qrcode" class="qrcode" />
<div class="qr-button">
<el-button @click="onDownload">下载</el-button>
</div>
</div>
<div class="link">
<h3>播放链接</h3>
<div class="url">{
{ url }}</div>
<div class="btn"><el-button size="mini" @click="onDownload">点击复制</el-button></div>
</div>
</el-dialog>
</template>
<script>
import QRcode from 'qrcodejs2'
export default {
props: {
visible: {
type: Boolean,
default: false
},
url: {
type: String,
default: ''
}
},
data() {
return {
}
},
watch: {
visible: {
handler: function(newValue) {
if (this.visible === true) {
this.createQRImage(this.url)
}
},
deep: true,
immediate: true,
imgUrl: ''
}
},
methods: {
onClose() {
this.$emit('close')
},
createQRImage(url) {
this.$nextTick(() => {
new QRcode(this.$refs['qrcode'], {
width: 182,
height: 182,
text: url
})
})
},
onDownload() {
const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
const a = document.createElement('a')
a.href = myCanvas[0].toDataURL('img/png')
console.log('a.href', a.href)
a.download = '二维码'
a.click()
}
// onCopyold() {
// const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
// const href = myCanvas[0].toDataURL('img/png')
// const input = document.createElement('input')
// input.value = href
// document.body.appendChild(input)
// console.log('input.value', input.value)
// input.select()
// document.execCommand('copy')
// }
}
}
</script>
<style lang="scss">
.qr-dialog {
.qrcode {
display: flex;
justify-content: center;
img {
background-color: #f8f8f8;
padding: 10px;
}
}
.qr-button {
display: flex;
justify-content: center;
padding-top: 10px;
}
.url-button {
display: flex;
justify-content: center;
align-items: center;
padding-top: 10px;
}
}
.link {
display: flex;
justify-content: center;
.url {
display: flex;
justify-content: center;
align-items: center;
margin: 0 10px;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
2. 复制文本到剪切板
onCopy() {
var oInput = document.createElement('input')
oInput.value = this.url
document.body.appendChild(oInput)
oInput.select()
document.execCommand('Copy')
oInput.className = 'oInput'
oInput.style.display = 'none'
this.$message({
message: '复制成功!',
type: 'success',
showClose: true
})
}