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

About??

已于 2022-05-25 19:38:09 修改

阅读量101

点赞数

分类专栏：山东大学项目实训文章标签： vue.js javascript 前端

于 2022-05-25 19:17:05 首次发布

本文链接：https://blog.csdn.net/weixin_46915587/article/details/124971688

版权

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

摘要由CSDN通过智能技术生成

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

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

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

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

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="codeVal