vue生成二维码并下载

素颜马尾好姑娘i 2022-09-06 00:12 212阅读 0赞

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>