在最近开发的时候,接到了一个任务,
需要在前端生成一个二维码,并且点击就打开弹窗,同时弹窗下面还有一个下载按钮,
点击下载按钮就调用浏览器的下载,且以一定规则进行文件命名
第一步还是先把这个二维码弄出来
1.打开当前目录的终端管理器导入组件
npm i qrcode -S
2.修改main.js
引入组件
import QRCode from 'qrcode'
使用组件
Vue.use(QRCode)
3.测试
<div>-->
<img :src="QRImgUrl" />
</div>
定义数据区
//demo
QRlink:'www.xxx.com',
QRImgUrl:'',
调用相对应的方法
getQRcode(){
QRCode.toDataURL(this.QRlink, { errorCorrectionLevel: 'L', margin: 2, width: 128 }, (err, url) => {
if (err) throw err
this.QRImgUrl= url
}
)
},
最后二维码出来了
需要下载,最后找到了资料2和3结合就是下面这些东西了
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="downQrImg">下载</el-button>
<a id="down"/>
</div>
方法区
downQrImg(){
let url = 图片base64地址.replace(/^data:image\/[^;]+/, 'data:application/octet-stream');
let elementById = document.getElementById("down")
elementById.href = url;
elementById.download = "自定义名字"+'.png';
elementById.click();
},
参考资料1
参考资料2
Javascript 如何从下载 src 为 data 数据的 img | 温欣爸比的博客
http://wxnacy.com/2018/01/29/download-from-img-src-data/
参考资料3