vue生成二维码并下载

vue生成二维码图片，这里使用的是qrcode.js 这个插件

1、下载插件

npm install --save qrcodejs2

2、组件内使用

</template>

3、<script>

import QRCode from 'qrcodejs2';
export default {
name:'tracing',
data(){
return{}
},
methods:{
// 生成二维码
qrcode(){
let qrcode = new QRCode('qrcode', {
width: 200,
height: 200, // 高度
text:"二维码内容"
})
},
// 查看二维码
getScan(){
// 清空之前生成的二维码
document.getElementById('qrcode').innerHTML='';
this.$nextTick(()=>{
this.qrcode();//生成二维码
})
},
// 下载二维码
getDownload(){　　　　this.qrcode(); //下载之前首先要有二维码
// 先找到canvas节点下的二维码图片
let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');
let img=document.getElementById('qrcode').getElementsByTagName('img');
// 创建一个a节点
let a = document.createElement('a');
// 设置a的href属性将canvas变成png格式
let imgURL=myCanvas[0].toDataURL('image/jpg');
let ua = navigator.userAgent;
if (ua.indexOf("Trident") != -1 && ua.indexOf("Windows") != -1) { // IE内核并且 windows系统情况下才执行;
var bstr = atob(imgURL.split(',')[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
var blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, '下载' + '.' + '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 = ' ';//下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
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()
}
},
　　// 打印二维码　　getPrinting(){　　　　let employeeName = "溯源信息";
　　　　let printContent = `<td >　　　　　　<div style="text-align: center;margin:0 0 10px;border:1px solid #ccc;padding:10px;width:300px" id='XQ'></div>　　　　　　<div style="text-align: center;margin:0 0 10px;width:300px" >　　　　　　　　<strong>${employeeName}</strong>　　　　　　</div>

　　 </td>`;
      document.getElementById("qrcode").innerHTML = printContent;
      let new_str = document.getElementById("qrcode").innerHTML; //获取指定打印区域
      //构建新网页(关键步骤,必须先构建新网页,在生成二维码,否则不能显示二维码)
      document.body.innerHTML = new_str;
      for (let j = 0; j < 1; j++) {
        document.getElementById("XQ").innerHTML = ""; //置空
        new QRCode(document.getElementById("XQ"), {
            text: "dfjkdjdfjak123456789",
            width: 250,
            height: 250,
            colorDark: "#000000",
            colorLight: "#ffffff",
        });
      }
      window.print(); //打印刚才新建的网页
      window.location.reload();
      return false;

},
//base64转blob
base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
}
}
</script>

vue生成二维码并下载相关推荐

vue 生成二维码并下载
vue 项目中需要实现生成二维码,并且下载下来. 引入 qrcode : import QRCode from "qrcodejs2" 生成二维码: createQRCode () ...
vue生成二维码并下载二维码
首先安装一下面这个插件 cnpm install vue-qr -S 接下来在需要生产并下载二维码的页面引入 import VueQr from 'vue-qr' 并在components中注册为组件 ...
某溯源平台：vue生成二维码压缩包下载(二)
项目还需要下载二维码打印,依赖两个包: 1.jszip是一个用于创建.读取和编辑.zip文件的JavaScript库, 2.工作需要通过 JavaScript 保存文件到本地,我们都知道 JavaSc ...
vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴
近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接.列表每项都有二维码.下载二维码和复制链接和列表上方总的二维码. 老模块是用的qrocode中文文档,qrcode github ...
利用VUE生成二维码（两种方式）
利用Vue生成二维码 Author:kak vue有两种生成二维码的方式,qrcode.vue-qr(有icon): 1.qrcode npm ``install` `--save qrcodejs2 ...
Vue生成二维码，自定义插入图片生成logo
Vue生成二维码,自定义插入图片生成logo vue-qr是一个很棒的制作二维码开源库,github地址:https://github.com/Binaryify/vue-qr 1.安装vue-qr ...
vue使用qrcodejs2生成带log的二维码图片，vue生成二维码图片中间带log，自定义log
安装插件 npm install qrcodejs2 --save 在页面中引入 import QRcode from 'qrcodejs2' 普通的二维码此处的id就是页面中要展示二维码容器的id ...
vue js前端根据所需参数生成二维码并下载
需要一个插件 qrcodejs2, 使用 npm install qrcodejs2 --save 下载该依赖包. 在vue中引入(我这边是vue2).import QRCode from 'qrco ...
vue+qrcodejs2 动态生成二维码并下载
安装依赖 npm install --save qrcodejs2 vue页面引用 <script>import QRCode from 'qrcodejs2'import axios f ...

vue生成二维码并下载

vue生成二维码并下载相关推荐

最新文章

热门文章