vue二维码的批量生成及下载

<template><div style="display: none" class="QRCode" ref="qrCodeUrl"></div><el-button size="small" type="primary" @click="createQrCode">下载二维码</el-button></template><script>
import FileSaver from 'file-saver';
import JSZip from 'jszip';
import QRCode from 'qrcodejs2';export default {components: {},data() {return {ids:["0e369d5c-d3de-4c62-cde8-08da269410c5","3126134b-3c7f-440a-cde7-08da269410c5"],QRCodeURL:[],            //存放生成的二维码图片地址};},created() {},methods: {// 生成二维码createQrCode() {if(!this.ids.length)return;document.querySelector('.QRCode').innerHTML = "";  // 清空div中的二维码图片this.ids.forEach((each) => {                       // 循环创建二维码new QRCode(this.$refs.qrCodeUrl, {             // 将创建好的二维码图片放在div中text: each,                                  // 需要转换为二维码的内容width: 100,height: 100,colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H})})let a = new Promise((resolve) => {setTimeout(() => {this.QRCodeURL = [];document.querySelectorAll('.QRCode img').forEach((each) => { // 查找div中的二维码图片this.QRCodeURL.push(each.src);                             // 保存创建的二维码图片地址})return resolve();}, 5000);})a.then(() => {this.batchQrCodeZip();                                      // 下载打包二维码图片})},batchQrCodeZip () {const zip = new JSZip()        //新建一个压缩文件const _this = thisconst promises = []for (const key in this.QRCodeURL) {const promise = _this.getFile(this.QRCodeURL[key]).then(data => { // 根据二维码图片地址下载文件, 并存成ArrayBuffer对象zip.file(`${key}` + '.png', data, { binary: true })           // 逐个添加文件，需要加后缀".png"})promises.push(promise);}Promise.all(promises).then(() => {zip.generateAsync({ type: 'blob' }).then(content => {// 生成二进制流FileSaver.saveAs(content, '二维码') // 利用file-saver保存文件  自定义文件名})}).catch(res => {console.log(res);})},// 根据二维码图片地址下载二维码getFile (url) {return new Promise((resolve, reject) => {axios({method: 'get',url,responseType: 'blob'}).then(response => {resolve(response.data)}).catch(error => {reject(error.toString())})})},};</script><style lang='less' scoped>
</style>

vue二维码的批量生成及下载相关推荐

Thinkphp6 生成二维码以及批量生成二维码并保存
1 ,引入 think-qrcode composer require dh2y/think-qrcode 成功后,vendor 文件夹下面会出现 dh2y文件夹 2, 在项目中引用 $code = ...
利用python生成二维码以及批量生成二维码
常见的两种简单生成二维码方法,目测均是很好用的 1.MyQR 要求是python3 ,并且二维码上的内容不支持中文 #1.生成普通二维码#在程序中导入MyQR包下的模板myqr,其中word参数接收 ...
vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode
通过使用 qrcode 生成二维码, 使用 jszip 打包批量二维码文件, 使用 file-saver 下载打包好的zip文件, 使用 vue-print-nb 打印生成的二维码生成二维码: 打印 ...
qrcode生成二维码（批量）
qrcode.js真的很简单,所以今天废话不多说,上代码: 页面引入js文件: <script type="text/javascript" src="/js/qr ...
vue二维码生成插件 - npm安装篇
vue二维码生成插件 - npm安装篇具体使用: 1. 安装: npm install vue-qr --save 2. 引入和声明 //在需要生成二维码的文件中引入比如qrCode.vue imp ...
PHP二维码在线制作生成系统源码无需数据库带logo图标
简介: PHP二维码在线制作生成系统源码无需数据库带logo图标网盘下载地址: http://kekewl.net/Myae89V9DX00 图片:
二维码相关---java生成二维码名片,并且自动保存到手机通讯录中...
二维码相关---java生成二维码名片,并且自动保存到手机通讯录中... 技术qq交流群:JavaDream:251572072 1.首先介绍一个api. Zxing是Google提供的关于条码 ...
微信公众号二维码海报自动生成,海报通推广有绝招
公众号二维码海报自动生成,使用公众号开发接口生成带参数的二维码和获取用户基本信息(UnionID机制)实现海报通的效果,在自己的服务器上部署就可以,也可以直接使用微号帮平台生成海报二维码. 1.生成海 ...
二维码插件qrcode生成二维码信息
文章目录二维码插件qrcode: JS逻辑实现: html展示与下载调用部分: 图片信息展示如下: 二维码插件qrcode: JS逻辑实现: <!-- 二维码插件,qrcode.min.js下 ...
二维码介绍及二维码的Python生成
新时代,人们有新的追求,自然而然会有新发明的诞生.去年,在"一带一路"国际合作高峰论坛举行期间, 20 国青年投票选出中国的"新四大发明":高铁.扫码支付.共享 ...

vue二维码的批量生成及下载

vue二维码的批量生成及下载相关推荐

最新文章

热门文章