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

以下代码中 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 == ) {
return;
}
var newWin = window.open(""); //新打开一个空窗口
for (var i = ; 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(); //关闭窗口
}, );
},

vue项目中批量打印二维码的更多相关文章

  1. vue常用插件之打印功能、二维码插件、批量打印二维码

    vue实现打印的两种方法 vue实现批量打印二维码 (需安装二维码插件qrcodejs2) 一.vue-print-nb插件 1.安装: npm i vue-print-nb -S 2.全局注册(ma ...

  2. vue项目使用qrcodejs2生成二维码

    最近写项目遇到一个需求,根据后台给的地址生成二维码,在网上找了下,qrcodejs2使用还是比较多,试了下也能实现需求,就整理下使用方法,方便以后使用   1. 安装包 cnpm i qrcodejs ...

  3. 在UniApp的H5项目中,生成二维码和扫描二维码的操作处理

    在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作.二维码的生成,使用了JS文件wea ...

  4. Lodop打印二维码内容长度不同如何大小相同

    利用Loodop打印控件打印二维码的时候,往往传入的数值是变量,有的只有一个数字,有的却一大堆数字和字母,根据内容长度不同,二维码大小也不同,这样如果批量打印二维码标签,传入的数据是不同的,会造成有的 ...

  5. 如何通过github上传项目并在readme.md中展示图片二维码

    将本地项目上传至github   第一步:git init (创建仓库)   第二步:git add README.md (添加项目)git add *   第三步:git commit -m &qu ...

  6. 使用FastReport打印二维码

    简单介绍一下该功能所在的项目背景:C#语言编写的WPF客户端应用程序,在“结账”模块中,打印出的收款小票上需要显示一个二维码,服务生拿着小票去找顾客,顾客可以选择现金.银行卡等普通支付方式,也可以直接 ...

  7. 安卓四核PDA手持PDA智能POS机 打印二维码 分享

    很多项目都会用到 类似的要求  移动手持终端 通过程序 可以生成条码或二维码 打印出小票或标签纸 下面直接上代码 希望对大家有点用处 private void print(){ csys.setTex ...

  8. C# TSC打印二维码和条形码

    效果图 开发.使用环境说明 安装TSC_7.3.8_M-3.exe打印机驱动,安装时选择对应的ttp 244 pro 将TSCLIB.dll复制到C:\Windows\system 驱动安装说明 选择 ...

  9. Web程序-----批量生成二维码并形成一张图片

    需求场景:客户根据前台界面列表所选择的数据,根据需要的信息批量生成二维码并形成一张图片,并且每张图片显示的二维码数量是固定的,需要分页(即总共生成的二维码图片超出每页显示的需另起一页生成),并下载到客 ...

随机推荐

  1. ewebeditor编辑器配合IIS6.0解析漏洞拿shell

    很明显这是一个ewebeditor编辑器,这个编辑器存在可遍历目录可创建文件夹等一系列漏洞.直接在url处加../即可.若要创建文件夹直接在url后面写文件夹名称即可. 上传一张shell图片,抓包改 ...

  2. [uboot]MLO和uboot-spl.bin, uboot.img和uboot.bin

    前段时间使用TI的am4378芯片,发现系统在SD卡启动的时候,启动文件使用的是MLO和uboot.img:而Norflash和eMMC启动的时候使用的是 uboot-spl.bin和uboot.bi ...

  3. sama5d3 环境检测 gpio--yk测试

    说明: gpio的MAP关系 yk0--pioA7  yk1--pioA5   yk2--pioA9   yk3--pioA3   yk4--pioA1  yk5--pioA8    (端子从左--& ...

  4. MySQL5.0、5.1、5.5、5.6功能进化

    目前线上使用的版本情况:新上线端口统一使用5.5,不说别的,一个快速恢复重启就值回票价. 但因为历史原因还有大量5.1的版本,甚至,I’am sorry,还有少数5.0的版本. 至于5.0以前的版本, ...

  5. TensorFlow基础笔记(0) 参考资源学习文档

    1 官方文档 https://www.tensorflow.org/api_docs/ 2 极客学院中文文档 http://www.tensorfly.cn/tfdoc/api_docs/python ...

  6. 第二百四十八节,Bootstrap轮播插件

    Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一.轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...

  7. php -- PDO属性设置

    设置PDO在处理数据的过程中采用什么方式去处理 PDO::setAttribute:设置属性 PDO::getAttribute:获取属性 语法: bool PDO::setAttribute ( i ...

  8. 【NOIP模拟题】Incr(dp)

    太水的dp没啥好说的.. #include <cstdio> #include <cstring> #include <cmath> #include <st ...

  9. PHPMailer发送邮箱

    1.可以参考的链接.http://www.helloweba.com/view-blog-205.html 2.下载最新的PHPMailer文件库 3.主要代码 class.phpmailer.php ...

  10. jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 function BuildS ...