vue二维码生成与图片下载

（一）web页面效果：

（二）执行结果：

（三）vue代码实例：

1）安装qrcode-vue库：npm install --save qrcode-vue

2）vue代码

<template><div class="div-box"><qrcode-vueid="qrcodeBox":size="qrcodeVue.size":value="qrcodeVue.value":bgColor="qrcodeVue.bgColor":fgColor="qrcodeVue.fgColor"></qrcode-vue><el-button type="primary" icon="el-icon-document" size="small" @click="downloadCode">下载二维码图片</el-button></div>
</template><script>import qrcodeVue from 'qrcode-vue'export default {name: 'Test',components: { qrcodeVue },data () {return {qrcodeVue: {size: 150,bgColor: '#67C23A', //背景色fgColor: '#FFFFFF', //前景色value: 'qrCode value', //二维码值logo: require('@/assets/logo.png') //logo图片}}},created () {},mounted () {},methods: {downloadCode(){//找到canvas标签let myCanvas = document.getElementById('qrcodeBox').getElementsByTagName('canvas')let img = document.getElementById('qrcodeBox').getElementsByTagName('img')// // //创建一个a标签节点let a = document.createElement('a')// //设置a标签的href属性（将canvas变成png图片）let imgURL = myCanvas[0].toDataURL('image/jpg')let ua = navigator.userAgentif (ua.indexOf('Trident') != -1 && ua.indexOf('Windows') != -1) {// IE内核 并且  windows系统 情况下 才执行;var bstr = atob(imgURL.split(',')[1])var n = bstr.lengthvar u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}var blob = new Blob([u8arr])window.navigator.msSaveOrOpenBlob(blob,row.num+'('+row.materialNum+')'+ '.' + 'png')} else if (ua.indexOf('Firefox') > -1) {//火狐兼容下载let blob = this.base64ToBlob(imgURL) //new Blob([content]);let evt = document.createEvent('HTMLEvents')evt.initEvent('click', true, true) //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为a.download = row.num+'('+row.materialNum+')' //下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空a.href = URL.createObjectURL(blob)a.dispatchEvent(new MouseEvent('click', {bubbles: true,cancelable: true,view: window})) //兼容火狐} else {//谷歌兼容下载img.src = myCanvas[0].toDataURL('image/jpg')// a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')a.href = img.src//设置下载文件的名字a.download =  '二维码下载图片名称'//点击a.click()}       }}}
</script><style>
.div-box {width:fit-content;height:fit-content;padding: 2px;border: 1px dashed #f69c55;position: relative;text-align: center;
}
</style>

vue二维码生成与图片下载相关推荐

vue二维码生成插件 - npm安装篇
vue二维码生成插件 - npm安装篇具体使用: 1. 安装: npm install vue-qr --save 2. 引入和声明 //在需要生成二维码的文件中引入比如qrCode.vue imp ...
iOS二维码生成中间带图片Logo
iOS二维码生成中间带图片效果图: ViewController.h 1 #import <UIKit/UIKit.h> 2 @interface ViewController : UIV ...
vue二维码生成可自定义logo
代码已上传至github github代码地址:https://github.com/Miofly/mio.git <template xlang="wxml">< ...
vue二维码生成和打印
二维码生成存放二维码 <div id="qrCode" class="qrCode"><div id='code' class=" ...
vue二维码生成且带文字图片下载
(一)web页面效果: (二)执行结果: (三)vue代码实例: 1)安装qrcode-vue库:npm install --save qrcode-vue 2)安装html2canvas库:npm ...
Winform中使用zxing实现二维码生成(附dll下载)
场景 zxing.dll下载 https://download.csdn.net/download/badao_liumang_qizhi/11623214 效果实现新建Winform程序,将上面 ...
vue二维码生成、打印及识别
生成二维码引入QRCode模块 npm install --save qrcode import QRCode from 'qrcode'; 页面代码批量创建二维码及打印,所以加了个v-for & ...
nodejs 实现二维码生成及图片合成
游戏前端需要做分享功能.生成二维码后在指定的图片上添加二维码和邀请码生成新的图片如图所示 1.使用 qr-code生成二维码 /*** 根据url 地址生成二维码*/async createQ ...
uniapp H5 二维码生成
vue 二维码生成步骤: 1. 引入二维码 import QRCode from 'qrcodejs2' 2. html 3. 二维码生成事件 creatQrCode() { var qrcode = ...
js 实现二维码生成
我们可以使用qrcodejs来实现js生成二维码,qrcodejs是用于JavaScript的跨浏览器QRCode生成器,可以十分简单的实现二维码生成一:下载qrcodejs插件 qrcode的地址 ...

vue二维码生成与图片下载

vue二维码生成与图片下载相关推荐

最新文章

热门文章