温柔的羊 2022-10-28 14:56 采纳率: 27.3%
浏览 24
已结题

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

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

img

img

img

用代码块功能插入代码,请勿粘贴截图
我想要达到的结果

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

  • 写回答

3条回答 默认 最新

  • Iam_楠 前端领域新星创作者 2022-10-28 15:01
    关注

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

    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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 11月26日
  • 已采纳回答 11月18日
  • 创建了问题 10月28日

悬赏问题

  • ¥50 用logisim设计16位单时钟周期cpu
  • ¥15 IDEA中圈复杂度如何具体设置
  • ¥50 labview采集不了数据
  • ¥15 请上面代码做什么处理或什么混淆
  • ¥15 英雄联盟自定义房间置顶
  • ¥15 W5500网线插上无反应
  • ¥15 如何用字典的Key,显示在WPF的xaml中
  • ¥15 weautomate读取Excel表格信息然后填写到网页一直报错,如何解决?
  • ¥15 C#如何在Webview2中获取网页验证码
  • ¥15 esp32烧录失败,具体情况在图片上