vue+qrcodejs2 动态生成二维码并下载

安装依赖

npm install --save qrcodejs2

vue页面引用

<script>import QRCode from 'qrcodejs2'import axios from 'axios'import JSZip from 'jszip'import FileSaver from 'file-saver'export default{components:{QRCode},}
</sscript>

HTML vue语法循环生成二维码并动态生成装二维码盒子

用后台抛的数据循环生成二维码

    async returnCode(row){this.CodeDialog = truethis.title = '导出二维码'try {let res = await this.$operationRequest.operationRequest({parkId:row.ParkinglotID},'GetParkinglotQRCode','GET');let jsonData = JSON.parse(res.datas)this.CodeList = JSON.parse(jsonData.list)this.CodeList.forEach((item,index)=>{//在dom加载完成后获取domthis.$nextTick(()=>{let dom = document.getElementById('qrcode'+index)//每次生成前先将二维码盒子里面的二维码清空dom.innerHTML = ''//将dom 和 二维码连接传过去this.qrcode(dom,item)})})} finally {}},//生成二维码qrcode (dom,val) {let qrcode = new QRCode(dom, {width: 200,  // 设置宽度height: 200, // 设置高度text: 'https://parks.borchaw.com/sp_mb/'+val.QRCode})},

批量下载(处理为一个压缩包)或当下载二维码

//获取文件getFile(url) {return new Promise((resolve, reject) => {axios({method: 'get', url, responseType: 'arraybuffer',}).then((data) => {resolve(data.data)}).catch((error) => {reject(error.toString())})})},//下载二维码DownCodeImg(val){//判断有val就是单个下载 没有则多个下载if(val){let dom = document.getElementById(val)// 获取dom二维码图片的连接let url =  dom.childNodes[1].src  //codeIMG  要下载的路径let link = document.createElement('a')// 这里是将url转成blob地址，fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址link.href = URL.createObjectURL(blob)link.download = 'pic'document.body.appendChild(link)link.click()})} else {const zip = new JSZip();const promises = [];this.CodeList.forEach((item,index) => {let dom = document.getElementById('qrcode'+index)// 获取dom二维码图片的连接let url =  dom.childNodes[1].src  //codeIMG  要下载的路径const promise = this.getFile(url).then((data) => {//截取后缀名（注意重命名一定要加上原来图片的后缀，否则下载出来的文件就是错误的）let nameList = url.split('.')let fileName = item.devName+index+'.png'zip.file(fileName, data, { binary: true })//文件名、文件流、是否为二进制});promises.push(promise)});//等待所有文件添加完进行打包Promise.all(promises).then(() => {zip.generateAsync({ type: 'blob' }).then((content) => {//利用file-saver保存文件  自定义文件名FileSaver.saveAs(content, this.Down_pack_name +'.zip')})}).catch((err) => {this.$message.error(err || '文件压缩失败')})}},

vue+qrcodejs2 动态生成二维码并下载相关推荐

vue+element 动态生成二维码并选择批量打印表格内容
下载生成二维码的插件(vue-qr) vue-qr npm install vue-qr --save 下载打印库(printJS) PrintJS npm install print-js --sa ...
Vue使用QrcodeVue生成二维码并下载
生成二维码 1.安装qrcode.vue组件 npm install --save qrcode.vue 2.实现 <template><div id="app" ...
unity 跨平台动态生成二维码免费下载
微信号:ITComputerGraph 更多精彩内容,关注公众号<IT木子李> csdn积分规则导致资源下载次数越多,需要的积分越高,本着奉献精神,博主特把所有资源放到微信公众号,欢迎大家 ...
vue js前端根据所需参数生成二维码并下载
需要一个插件 qrcodejs2, 使用 npm install qrcodejs2 --save 下载该依赖包. 在vue中引入(我这边是vue2).import QRCode from 'qrco ...
微信内置浏览器动态生成二维码并长按识别
现如今围绕微信生态相关开发已经非常常见,本期带来如何通过 qrcode.js 实现微信内置浏览器动态生成二维码并能够长按识别以及通过 html2canvas 生成图片并长按保存说几个知识点微信 ...
vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴
近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接.列表每项都有二维码.下载二维码和复制链接和列表上方总的二维码. 老模块是用的qrocode中文文档,qrcode github ...
根据url动态生成二维码
根据url动态生成二维码的工具类,没有细研究,先贴出来,有兴趣自己深究.public class QRCodeUtil {public static BufferedImage createImage ...
VUE微信H5生成二维码海报保存在本地相册
VUE微信H5生成二维码海报保存在本地相册一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需 ...
vue使用qrcode生成二维码
vue使用qrcode生成二维码 1. 首先安装qrcode插件 npm i qrcode -S 2.引入使用 import QRCode from 'qrcode' 3.生成二维码 <temp ...

vue+qrcodejs2 动态生成二维码并下载

安装依赖

vue页面引用

HTML vue语法循环生成二维码并动态生成装二维码盒子

用后台抛的数据循环生成二维码

批量下载(处理为一个压缩包)或当下载二维码

vue+qrcodejs2 动态生成二维码并下载相关推荐

最新文章

热门文章

vue+qrcodejs2 动态生成二维码并下载

安装依赖

vue页面引用

HTML vue语法循环生成二维码 并动态生成装二维码盒子

用后台抛的数据循环生成二维码

批量下载(处理为一个压缩包)或当下载二维码

vue+qrcodejs2 动态生成二维码并下载相关推荐

最新文章

热门文章

HTML vue语法循环生成二维码并动态生成装二维码盒子