vue-qr之二维码展示与下载

// 下载
npm install vue-qr

<el-buttonsize="mini"type="success"icon="el-icon-link"@click="share(scope.row)"/>

    <!--链接、二维码--><el-dialog title="链接/二维码" :visible.sync="qrCodeVisible" width="300px" ><el-row><el-col :span="24" align="center" ><div class="qrCode"><vue-qr :text="formUrl" /></div></el-col><el-col :span="24" align="center"><span @click="downloadImg">下载二维码</span></el-col></el-row></el-dialog>

    // 二维码链接share(data) {this.qrCodeVisible = truethis.formUrl =  data.card},// 下载二维码图片downloadImg() {const oQrcode = document.querySelectorAll('.qrCode img')// 获取图片地址（可能是一串base64的编码）const url = oQrcode[0].src// 创建a标签const a = document.createElement('a')// 创建鼠标点击事件const event = new MouseEvent('click')a.href = urla.download = '二维码'// 下载a.dispatchEvent(event)}

附属性：

vue-qr之二维码展示与下载相关推荐

Vue批量生成二维码并打包下载
//[插件地址](https://github.com/Binaryify/vue-qr) <template v-for="(item, index) in qr_code_data ...
vue中生成二维码并自动批量下载
项目中经常又这样的需求,要求将字符串生成二维码,并下载下来一般分为生成一个二维码展示并下载,对于这种你只需调用 qrcodejs2生成二维码就可以了下载也是按钮触发今天我们要说的是批量下载, ...
Vue+element-ui上传logo图片到后端生成二维码展示到页面
Vue+element-ui上传logo图片生成二维码展示到页面该文章将介绍如何通过前端上传二维码logo图片在后台生成二维码,并将生成的二维码转换成Base64编码返回给前端在页面展示,用户扫码二 ...
vue产生二维码并且打包下载
在做一个二开项目,前端使用的vue element-ui. 需求要在列表里面展示二维码,并且可以批量打包下载. 首先我们能确定在接口里面返回的是二维码链接展示二维码 1. 在el-table中加入 ...
java+vue的二维码生成，二维码上传服务器，二维码的压缩包下载
一. vue页面生成二维码 <template><div class="app-container">//在页面放着二维码的div<div id=&q ...
Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
QR code 二维码基础入门教程（二）
QR code 二维码基础入门教程(二) 承接上文,让我们继续下面的步骤纠错码编码先说说纠错容量纠错码可以纠正两种错误: 拒读错误(错误码位置已知),是一个没有扫到或者无法译码的符号字符,需要一 ...
QR code 二维码基础入门教程
QR code 二维码基础入门教程本文为 QR Code Tutorial: Introduction 的总结,详细内容请查看原文 Introduction History and Informat ...
vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...

vue-qr之二维码展示与下载

vue-qr之二维码展示与下载相关推荐

最新文章

热门文章