vue渲染java后台接口链接式二维码

Question

问题遇到的现象和发生背景

用代码块功能插入代码，请勿粘贴截图

我想要达到的结果

直接访问后台接口生成二维码，像这页面展示和不展示都可以，只需要用户能够下载或者保存这个二维码就行啦，
前端需要怎么实现啊？帮帮忙。

Answer 1

用户能看到或者下载二维码要用到一个插件，你可以看一下下面的插件的使用

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>