山东大学项目实训开发日志——基于vue+springboot的医院耗材管理系统(13)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46915587/article/details/124971688

本文记录了在山东大学项目实训中，如何在基于vue+springboot的医院耗材管理系统中实现二维码的生成与打印功能。此功能用于支持扫码出入库操作，通过读取页面数据生成二维码，扫描后可获取对应信息。虽然部分代码来源网络，但已成功实现预期效果，待后续完善打印方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次新增产生、打印二维码的功能。

这个功能本质上就是从当前页面读取相应的数据并据此生成一个二维码，扫描这个二维码可以得到相应的数据。

这个功能是用来支持扫码出入库的功能。

我随便找出一个生成并打印二维码的方法举例。

printCode() {
      setTimeout(() => {
        const that = this;
        this.$nextTick(() => {
          let arrDom = document.querySelectorAll(".qrcode-pic");

          let iframe = document.createElement('IFRAME');
          iframe.setAttribute('style', 'position: absolute: width:0px; height: 0px; left: -500px; top:-500px;');
          document.body.appendChild(iframe);
          let doc = iframe.contentWindow.document;

          for (let i = 0; i < that.stockCentreDetail.length; i++) {
            doc.write(`

                <div class="long">
                         <div class="qrcode">${arrDom[i].innerHTML}</div>
                         <div class="codeValue">${that.stockCentreDetail[i].codeValue}</div>
                </div>
                <div style="page-break-after: always"><br /></div>
            `);
          }
          doc.write(`
            <style>
              .long {
                width: 300px;
                height: 100px;
                padding: 2rem;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
              }
              .qrcode{
                width: 110px;
                height: 110px;
                float: left;
              }
              .codeValue{
                width: 180px;
                height: 100px;
                float: right;
                font-size:8px;
                word-break:break-all;

              }
            </style>

          `);
          iframe.contentWindow.print();
          iframe.parentNode.removeChild(iframe)
        })

      }, 100)
    },

这部分来源于网络，我并没有完全理解这些东西具体起什么作用，但是用起来确实有效。

然后是打印的控制台提示

handleBatchPrintCode1() {
      //必须要等到页面加载完成，不然会报错
      this.$nextTick(() => {
        console.log("goodsData111: ", this.goodsData)
        this.goodsData.forEach((item, index) => {
          console.log("code111111: ")
          let code = item.code;
          console.log("code: ", code)
          this.$refs.codeItem[index].innerHTML = "";
          new QRCode(this.$refs.codeItem[index], {
            text: code, //二维码内容
            width: 200,
            height: 200,
            // colorDark: "#333333", //二维码颜色
            // colorLight: "#ffffff", //二维码背景色
          })
        })
      })
    },

不难，生成二维码的方式网上到处都有，其实还需要一个方法，但是那个方法的位置找不到了，下次找到时再行更新。