• 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="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);
        },
  • 相关阅读:
    简单实现Http代理工具
    Silverlight+WCF 新手实例 象棋 棋子(三)
    Qt for S60 安装
    简单实现Http代理工具完善支持QQ代理
    openSUSE 11.2 初用与上网设置
    简单实现Http代理工具端口复用与QQ代理
    QT 智能提示设置
    Solaris 10 x86 继续折腾Mono
    Silverlight+WCF 新手实例 象棋 介绍(一)
    Qt Creator 运行s60 Emulator
  • 原文地址:https://www.cnblogs.com/ss977/p/10120651.html
Copyright © 2020-2023  润新知