第一步 :html 设置DIV,用于存放批量生成的二维码 
<div class="x_panel" style="margin:0 auto;display:none;" id="qrcode2"> </div>
第二部:获取选中行的数据
1 获取选中行数据,点击全选或者选中多个
<tableclass="table table-striped jambo_table bulk_action"id='test_table'>
<thead>
<tr class="headings">
<th width="60"><label>
<inputtype="checkbox"v-model='all_check' @click="changecheck"/>
</label>全选
</th>
<th>
<!-- <input type="checkbox" id="check-all" class="flat"> -->
</th><th class="column-title">机器编码</th>
<th class="column-title">货品名称</th>
<th class="column-title">型号规格</th>
<th class="column-title">序列号</th>
<th class="column-title">单位</th>
<th class="column-title">数量</th>
<th class="column-title">机器归属</th>
<th class="column-title">存放地点</th>
<th class="column-title">机器类别</th>
<th class="column-title">品牌</th>
<th class="column-title">机器地址</th>
<th class="column-title">使用耗材类型</th>
<th class="column-title">负责人</th>
<th class="column-title">状态</th>
<th class="column-title">备注</th>
<th class="column-title no-link last"><spanclass="nobr">动作</span>
</th>
<th class="bulk-actions" colspan="7">
<a class="antoo" style="color:#fff; font-weight:500;">(<span class="action-cnt"></span> )<iclass="fa fa-chevron-down"></i></a>
</th>
</tr>
</thead><tbody>
<tr id="selectable" class="even pointer" v-for="(tempobj,index) in tempobjs" v-show="tempobjshow" style="display: none;">
<!-- <td class="a-center ">{{index+1}}</td> -->
<td><inputname='r' type="checkbox" v-model='items[index+1+(newpage-1)*10]'></td>
<td class="a-center ">{{index+1+(pagen-1)*10}}</td>
<td class="a-left">{{tempobj.printercode}}</td>
<td class="a-left">{{tempobj.name}}</td>
<td class=" ">{{tempobj.type}}</td>
<td class=" ">{{tempobj.serialnum}}</td>
<td class=" ">{{tempobj.unit}}</td>
<td class=" ">{{tempobj.amount}}</td>
<td class=" ">{{tempobj.belong}}</td>
<td class=" ">{{tempobj.location}}</td>
<td class=" ">{{tempobj.machinetype}}</td>
<td class=" ">{{tempobj.brand}}</td>
<td class=" ">{{tempobj.position}}</td>
<td class=" ">{{tempobj.materialtype}}</td>
<td class=" ">{{convertperson(tempobj.manager)}}</td>
<td class=" ">{{convertstatus(tempobj.status)}}</td>
<td class="a-right a-right ">{{tempobj.remarks}}</td>
<!--<td class=" ">{{tempobj.type}}</td>-->
<!-- <td class=" ">{{convertDate(tempobj.age)}}</td> -->
<td class="last">
<!-- <a class="btn btn-primary btn-xs" @click="viewtempobj(tempobj)"><i class="fa fa-folder" ></i>查看</a> -->
<a class="btn btn-info btn-xs" @click="edittempobj(tempobj,index)"><iclass="fa fa-pencil"></i>修改</a>
<a class="btn btn-danger btn-xs" @click="deletetempobj(tempobj,index)"><iclass="fa fa-trash-o"></i>删除</a>
<!--<a class="btn btn-success btn-xs" @click="qrcode(tempobj,index)"><i class="fa fa-qrcode"></i>设备二维码</a>-->
<!-- <a class="btn btn-warning btn-xs" @click="qrcoderepair(tempobj,index)"><i class="fa fa-qrcode"></i>维修二维码</a> -->
<a class="btn btn-success btn-xs" @click="qrcoderepair(tempobj,index)"><iclass="fa fa-qrcode"></i>设备二维码</a>
</td>
</tr></tbody>
</table>

 2 显示选中框

methods: {
//点击全选时
changecheck:function(){
for(vari=0;i<vm.items.length;i++){
vm.items[i]=vm.all_check;
}
},
<button class="btn btn-default source" onclick="doPrint()"><iclass="glyphicon glyphicon-plus">批量打印二维码</i></button>
3 点击 批量打印二维码时
<button class="btn btn-default source" onclick="doPrint()"><iclass="glyphicon glyphicon-plus">批量打印二维码</i></button>
 4 js 方法
//打印二维码 start jingcheng 2017.7.27
function doPrint(){
//获取选中行数据
var rows =document.getElementById("test_table").rows;
var a =document.getElementsByName("r");
var table =document.getElementById("test_table");
for(vari=0;i<a.length;i++) {
if(a[i].checked){
var row =a[i].parentElement.parentElement.rowIndex;allprint_tempobjs.push(tempobjs[row -1+(vm.pagen-1)*10]);
}
}
var html ="";
allprint_tempobjs.forEach(function(item,index) {
html+=' <em ><div style=\"margin:0 auto;\" align=\"left\">';
html +='<div ><label class=\"control-label\" id=\"name\">设备名称:</label>';
html +=' <em id="printername">'+item.name +'</em></div>';//设备名称
html +='<div><label id=\"serialnum\">设备规格:</label>';
html +=' <em id=\"printerserialnum\">'+item.serialnum+'</em></div>';//设备规格
html +='<div ><label id=\"ID\">ID号:</label>';
html +='<em id=\"printerid\">'+item.id+'</em></div>'//ID号
html +='<div ><label id="serialnum">编码:</label>';
html +='<em id=\"code\">'+'</em></div>';//编码
html +='<div ><label id=\"tel\"></label>';
html +=' <em style=\"font-size:20px\"><strong>扫码呼叫服务</strong></em></div> </div>';//扫码呼叫服务
html +=' <div class=\"x_content\" id=\"qrcodepic'+index+'\" style=\"width:100%;height:100%;\"> </div></em>';//二维码
});
$("#qrcode2").append(html);var head_str ='<html><head><title></title></head><body>';//先生成头部
var foot_str ="</body></html>";//生成尾部
//var older = document.body.innerHTML;
var new_str =document.getElementById("qrcode2").innerHTML;//获取指定打印区域
//构建新网页(关键步骤,必须先构建新网页,在生成二维码,否则不能显示二维码)
document.body.innerHTML =head_str + new_str +foot_str;
for(vari=0;i<allprint_tempobjs.length;i++){
$("#qrcodepic"+i).empty();
var qrcode="qrcodepic"+i;
str="http://192.168.21.36:3000/indexuser/indexuser.html?id="+allprint_tempobjs[i].id;
var qrcode =new QRCode(document.getElementById(qrcode), {
text: str,
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.Q
});}window.print();//打印刚才新建的网页
window.location.reload();
return false;
}

NodeJs+VueJs +前端实现批量打印二维码相关推荐

  1. access 打印预览 代码_TSC TTP-244条码打印机如何批量打印二维码

    二维码的应用可以说是非常的普遍了,二维码在应用之前不但需要条码打印机批量打印二维码,还需要相关的二维码制作软件制作二维码.今天小编就教大家用TSC TTP-244条码打印机批量打印二维码. 1.打开二 ...

  2. Deli条码打印机如何批量打印二维码

    如题,今天小编就和大家说说Deli条码打印机如何批量打印二维码,除了必须的Deli条码打印机外,还需要条码打印软件,用来生成二维码,话不多活,接下来我们就看先是如何实现的. 把Deli条码打印机和电脑 ...

  3. JS前端调用TSC打印二维码、条码

    公司让用js调用TSC打印二维码,本人已调试成功,希望大家有所帮助! ActiveX下载地址:ActiveX下载地址! 实现代码:JS前端调用TSC打印二维码实现代码 <HTML> < ...

  4. 如何使用百数批量打印二维码?

    为了让用户更加方便的通过手机查看数据,百宝云支持数据二维码批量打印,用户只需要扫描二维码就可以查看该二维码对应的数据. 操作步骤 [选择目标表单]--[数据管理]--[批量操作]--[批量打印二维码] ...

  5. 得力标签批量打印二维码

    得力标签批量打印二维码 最近公司要求做一个二维码标签打印, 网上搜索了很多..期间实验了多种方案: 1 javax.print 打印(离线本地打印,无法做到只要用户有打印机就可以) 2 网页打印(将图 ...

  6. vue项目中批量打印二维码

    前提:项目中要打印的二维码为后台返回,批量选择后,点击打印,先打开二维码预览界面,再执行打印. 以下代码中 codePicList为选中的二维码数组.重点css:page-break-after:al ...

  7. 批量打印二维码的软件---使用心得(领跑条码标签打印软件)

    这不是广告,不是广告,不是广告! 感谢 前人的教程:http://blog.sina.com.cn/s/blog_a2e22c120101kcwl.html 公司软件需要支持二维码批量打印功能,公司考 ...

  8. QT编程 批量打印二维码

    1.下载打印机驱动,驱动下载在资源列表里 2.QT编程 打印机初始化 3.打印机命令网上有文档,QRCODE命令打印二维码,内容自定义 主要是设置打印亚银纸张 长宽大小.字体大小.打印纸张位置,二维码 ...

  9. TSC 标签打印机,使用TSPL指令,前端 jsp 调用打印二维码和文本标签的案例

    因为需要调用打印机封装好的DLL文件,只能在IE下使用ActiveX来调用,直接使用tspl指令来打印.只在前台调用,所以后台什么也不需要,但是客户端需要进行配置,首先要安装打印机驱动,然后注册DLL ...

最新文章

  1. 引用安装好的pywin,出现“ModuleNotFoundError: No module named 'win32api'”提示
  2. 多线程并发:每个开发人员都应了解的内容
  3. editplus替换空白行的正则表达式
  4. openstack 网络简史
  5. Misc(网络+组成原理)
  6. windows php fastcgi,windows下FastCGI(php-cgi)的工作原理和配置
  7. JWT—JSON Web Token - 理解JWT网络间应用用户安全认证交互设计
  8. kafka consumer group 定义
  9. 【渝粤教育】国家开放大学2018年秋季 0321-21T学前心理学 参考试题
  10. Unstated浅析
  11. 游戏脚本代码大全_如何用5行Python代码写出刷分游戏脚本!Python真牛!
  12. 每日作业-品优购详情页
  13. Gym - 101808K Another Shortest Path Problem (Damascus University Collegiate)【并查集+LCA】
  14. 二行代码解决全部网页木马
  15. 财会行业男女薪资比例matlab,2004:会计师事务所薪资调查分析报告
  16. dns解析失败故障问题解决两例
  17. sx1278lora模块的常见问题解答
  18. Pandas中透视表和交叉表
  19. yml配置文件的文件格式简单介绍
  20. python作业爬取xxx大学排行

热门文章

  1. Ubuntu备份还原
  2. Python之建模数值逼近篇–最小二乘拟合
  3. IBM DB2基础知识学习作业
  4. linux自动同步onedrive,Linux下同步onedrive
  5. 几组超神奇的网页应用代码要你在IE浏览器任意打开一个网站,然后在浏览器上输入如下代码神奇的代码,可随意修改复制页面内容!
  6. 【油猴脚本】B站弹幕机器人
  7. 银联无跳转支付流程(银联侧开通)
  8. 派森编程软件python有什么用_派森平台干什么的
  9. 解决Arial字体“高低肩问题”
  10. python之flappy bird(飞扬的小鸟)小游戏分享,内附源码哦~