vue自動生成二維碼並下載打印到本地

vue生成二維碼圖片，這里使用的是qrcode.js 這個插件

1、下載插件

npm install --save qrcodejs2

2、組件內使用

<template>
  <Button type="primary" size="small" @click="getScan()">掃一掃</Button>
　<Button type="primary" size="small" @click="getDownload()">下載</Button>
  <Button type="primary" size="small" @click="getPrinting()">打印</Button>
　<!--二維碼-->
　<div id="qrcode"></div> 
</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>