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 == ) {
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项目中批量打印二维码的更多相关文章
- vue常用插件之打印功能、二维码插件、批量打印二维码
vue实现打印的两种方法 vue实现批量打印二维码 (需安装二维码插件qrcodejs2) 一.vue-print-nb插件 1.安装: npm i vue-print-nb -S 2.全局注册(ma ...
- vue项目使用qrcodejs2生成二维码
最近写项目遇到一个需求,根据后台给的地址生成二维码,在网上找了下,qrcodejs2使用还是比较多,试了下也能实现需求,就整理下使用方法,方便以后使用 1. 安装包 cnpm i qrcodejs ...
- 在UniApp的H5项目中,生成二维码和扫描二维码的操作处理
在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作.二维码的生成,使用了JS文件wea ...
- Lodop打印二维码内容长度不同如何大小相同
利用Loodop打印控件打印二维码的时候,往往传入的数值是变量,有的只有一个数字,有的却一大堆数字和字母,根据内容长度不同,二维码大小也不同,这样如果批量打印二维码标签,传入的数据是不同的,会造成有的 ...
- 如何通过github上传项目并在readme.md中展示图片二维码
将本地项目上传至github 第一步:git init (创建仓库) 第二步:git add README.md (添加项目)git add * 第三步:git commit -m &qu ...
- 使用FastReport打印二维码
简单介绍一下该功能所在的项目背景:C#语言编写的WPF客户端应用程序,在“结账”模块中,打印出的收款小票上需要显示一个二维码,服务生拿着小票去找顾客,顾客可以选择现金.银行卡等普通支付方式,也可以直接 ...
- 安卓四核PDA手持PDA智能POS机 打印二维码 分享
很多项目都会用到 类似的要求 移动手持终端 通过程序 可以生成条码或二维码 打印出小票或标签纸 下面直接上代码 希望对大家有点用处 private void print(){ csys.setTex ...
- C# TSC打印二维码和条形码
效果图 开发.使用环境说明 安装TSC_7.3.8_M-3.exe打印机驱动,安装时选择对应的ttp 244 pro 将TSCLIB.dll复制到C:\Windows\system 驱动安装说明 选择 ...
- Web程序-----批量生成二维码并形成一张图片
需求场景:客户根据前台界面列表所选择的数据,根据需要的信息批量生成二维码并形成一张图片,并且每张图片显示的二维码数量是固定的,需要分页(即总共生成的二维码图片超出每页显示的需另起一页生成),并下载到客 ...
随机推荐
- Xml解析之PULL解析 例1
<?xml version="1.0" encoding="UTF-8"?> <persons> <person id=" ...
- 修改ElasticSearch默认的from size
2016年04月07日 17:04:17 阅读数:8065 如果需要搜索分页,可以通过from size组合来进行.from表示从第几行开始,size表示查询多少条文档.from默认为0,size默认 ...
- mongdb 慢查询
查看mongodb慢查询 赶紧打开服务器爸爸,开慢查询,看下耗时500ms以上的都是些啥: db.setProfilingLevel(2,500) 看下最近的10条具体的慢查询指令: db.syste ...
- 数论 - SGU 107 987654321 problem
987654321 problem Problem's Link Mean: 略 analyse: 这道题目是道简单题. 不过的确要好好想一下: 通过简单的搜索可以知道,在N<9时答案一定为0, ...
- 树链剖分 + 后缀数组 - E. Misha and LCP on Tree
E. Misha and LCP on Tree Problem's Link Mean: 给出一棵树,每个结点上有一个字母.每个询问给出两个路径,问这两个路径的串的最长公共前缀. analyse: ...
- Linux 串口编程
今天对应用层串口编程进行了验证.程序来源于以下参考链接,自己进行了一些注释和更改,记录于此. Tony Liu, 2016-6-17, Shenzhen 参考链接 https://www.ibm.co ...
- mysql -- 创建存储过程 往数据表中新增字段
需求: 往某数据库的某个表中新增一个字段(若该字段已存在,则不做操作:若该字段不存在,则新增) 百度了n久,没有符合要求的例子,只有参考加自己琢磨,最终终于给弄出来了,以下是几个版本的更迭 第一版: ...
- duilib Webkit内核dui化浏览器控件
參考http://blog.csdn.net/zhuhongshu/article/details/38540711 改进: 1.跟其它duilib控件一样,不包括窗体 2.将onURLChanged ...
- Maven实战(三)——多模块项目的POM重构
在本专栏的上一篇文章POM重构之增还是删中.我们讨论了一些简单有用的POM重构技巧,包含重构的前提--持续集成,以及怎样通过加入或者删除内容来提高POM的可读性和构建的稳定性.但在实际的项目中,这些技 ...
- 登陆Oracle11g的企业管理器
本地:https://localhost:1158/em/ 如果远程:那么把localhost换成服务器IP