vue项目中批量打印二维码

Posted ss977

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目中批量打印二维码相关的知识,希望对你有一定的参考价值。

前提:项目中要打印的二维码为后台返回,批量选择后,点击打印,先打开二维码预览界面,再执行打印。

以下代码中 codePicList为选中的二维码数组。
重点css:page-break-after:always 在元素后插入分页符;
在打印时,要分页(需求是每个二维码打印在一张纸上)
// 此代码为浏览界面遍历出来的要打印的多个二维码
<ul id="codeImgviewer" v-if="codePicList != null && codePicList.length != 0"> <li v-for="(item,index) in codePicList" v-bind:key="index" style="cursor:pointer; padding:10px;float:left"> <div :id="‘codeimg‘ + index" style="page-break-after:always;"> <img :src="item" style="width:260px;height:130px;" @click="showBigImg(‘codeImgviewer‘)" /> </div> </li> </ul>
 //打印二维码
    printCode() {
      if (this.codePicList == null || this.codePicList.length == 0) {
        return;
      }
      var newWin = window.open(""); //新打开一个空窗口
      for (var i = 0; i < this.codePicList.length; i++) {
        var imageToPrint = document.getElementById("codeimg" + i); //将要被打印的图片
        newWin.document.write(imageToPrint.outerhtml); //将图片添加进新的窗口
      }
      newWin.document.close(); //在IE浏览器中使用必须添加这一句
      newWin.focus(); //在IE浏览器中使用必须添加这一句
      setTimeout(function() {
        newWin.print(); //打印
        newWin.close(); //关闭窗口
      }, 100);
    },

 




以上是关于vue项目中批量打印二维码的主要内容,如果未能解决你的问题,请参考以下文章

vue项目中,多选列表,批量打印

前端vue项目实现单页打印功能

Vue2 中使用C-Lodop打印控件时无法调整二维码大小问题

回归 | js实用代码片段的封装与总结(持续更新中...)

怎样批量制作植物二维码吊牌

利用zxing源码包批量生成二维码,压缩并下载到本地