vue自动生成二维码并下载打印到本地
vue生成二维码图片,这里使用的是qrcode.js 这个插件
1、下载插件
npm install --save qrcodejs2
2、组件内使用
3、
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 = ``; 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;
${employeeName}
}, //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}); } } }