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

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

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

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

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

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(`

                
                         ${arrDom[i].innerHTML}
                         ${that.stockCentreDetail[i].codeValue}
                
                

            `);
          }
          doc.write(`
            

          `);
          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", //二维码背景色
          })
        })
      })
    },

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