VUE打印页面中部分组件-二维码等

VUE打印页面中部分组件-二维码等

在今天做项目的时候,遇到了一个问题,需要将设备的二维码连接激光打印机打印,但是二维码嵌入在页面中,如果只打印此二维码块的话,会出现二维码不渲染的情况。
为了解决这个问题,将二维码复制一份到一个dialog中,然后采用延迟打印的方法等待二维码渲染,最后实现了针对二维码的打印.
在以下代码的基础上,新增一个button点击触发doPrint()以及全域变量dialogTableVisible即可。

<el-dialog :before-close="cancel" :visible.sync="dialogTableVisible" width="100%" fullscreen :show-close="false"
      append-to-body center>
      <el-form ref="form" label-width="100px">
        <qrcode id="qrcode2" v-if="form.num!=null && form.num!=''" v-model="form.num" :options="{ size: 100 }">
        </qrcode>
      </el-form>
    </el-dialog>
    doPrint() {
      this.dialogTableVisible = true;

      var that = this;
      setTimeout(function () {
        window.print();
        that.dialogTableVisible = false;
      }, 500);
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值