vue中生成二维码并自动批量下载

项目中经常又这样的需求，要求将字符串生成二维码，并下载下来

一般分为生成一个二维码展示并下载，对于这种你只需调用 qrcodejs2生成二维码就可以了下载也是按钮触发

今天我们要说的是批量下载，具体做法是

首先下载资源

npm install  qrcodejs2 --save

在对于的文件中引入，在template中添加如下的html代码

<div id="qrcode" style="display:none"></div>

然后就是获得一个数组字符串，就是需要生成二维码的字符串弄成一个数组

    let newArr = getNewArra()for (let i = 0; i < newArr.length; i++) {(function (code) {new QRCode('qrcode', {width: 200,height: 200, // 高度text: code, // 二维码内容correctLevel: QRCode.CorrectLevel.H})downloadQrCode()})(newArr[i])}function downloadQrCode () {let myselfCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')let img = document.getElementById('qrcode').getElementsByTagName('img')let ah = document.createElement('a')let imgURL = myselfCanvas[0].toDataURL('image/jpg')let u = navigator.userAgentif (u.indexOf('Trident') !== -1 && u.indexOf('Windows') !== -1) {let bstr = atob(imgURL.split(',')[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}let blob = new Blob([u8arr])window.navigator.msSaveOrOpenBlob(blob, '二维码' + '.' + 'png')} else if (u.indexOf('Firefox') > -1) {let blob = base64ToBlob(imgURL)let evt = document.createEvent('HTMLEvents')evt.initEvent('click', true, true)ah.download = ' 'ah.href = URL.createObjectURL(blob)ah.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))} else {img.src = myselfCanvas[0].toDataURL('image/jpg')ah.href = img.srcah.download = '二维码图片'ah.click()}}// base64转blobfunction base64ToBlob (code) {let parts = code.split(';base64,')let contentType = parts[0].split(':')[1]let raw = window.atob(parts[1])let rawLength = raw.lengthlet uInt8Array = new Uint8Array(rawLength)for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i)}return new Blob([uInt8Array], { type: contentType })}

解释一下：可以将downloadQrCode()函数绑定到单独下载的按钮上去，这样就变成一个一个下载的
而我是使用了匿名函数一个一个的去生成二维码并自动去调用下载。

vue中生成二维码并自动批量下载相关推荐

Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
vue 中生成二维码，合成海报
1.分别引入 qrcodejs2.html2canvas 执行以下命令行 npm install qrcodejs2 npm install html2canvas 2.下载canvas2image, ...
在Vue中生成二维码扫描在手机上跳转页面
使用方法: 安装vue-qr npm install vue-qr --save 在components新建一个vue组件,eg:vueQr.vue (以下为组件完整代码) <template& ...
在Vue中生成二维码(前端生成二维码:Qrcode)
1.首先我们需要使用"npm install --save qrcode"下载依赖包 npm install --save qrcode 2.在要使用qrcode的页面导入qrco ...
【工具】Vue中生成二维码组件——vue-qr
[工具]Vue中生成二维码组件--vue-qr npm地址--https://www.npmjs.com/package/vue-qr 注:不支持IE浏览器效果 1.安包 npm install v ...
Vue项目生成二维码
场景: [民主测评.闭卷测试] Vue项目生成二维码,使用手机浏览器扫码录入答题一,创建vue项目,样式布局,接口联调, npm run build 打包成dist 文件,让后台发送到服务器中,页面 ...
C#中生成二维码（QR码）与读取二维码内容
使用开源类库ZXing.dll可以在C#中生成二维码和解析二维码为指定的字符串(含url) 新建windows窗体应用程序QRCodeDemo,.net 4.5,将默认的Form1重命名为FormQu ...
在java中生成二维码，并直接输出到jsp页面
在java中生成的二维码不存到磁盘里要直接输出到页面上,这就需要把生成的二维码直接以流的形式输出到页面上,我用的是myeclipse 和 tomcat 它的原理是:在加载页面时,根据img的src(c ...
vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...

vue中生成二维码并自动批量下载

vue中生成二维码并自动批量下载相关推荐

最新文章

热门文章

vue中 生成二维码 并自动批量下载

vue中 生成二维码 并自动批量下载相关推荐

最新文章

热门文章

vue中生成二维码并自动批量下载

vue中生成二维码并自动批量下载相关推荐