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);
},