NodeJs+VueJs +前端实现批量打印二维码
<div class="x_panel" style="margin:0 auto;display:none;" id="qrcode2"> </div>
<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>
<button class="btn btn-default source" onclick="doPrint()"><iclass="glyphicon glyphicon-plus">批量打印二维码</i></button>
//打印二维码 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 +前端实现批量打印二维码相关推荐
- access 打印预览 代码_TSC TTP-244条码打印机如何批量打印二维码
二维码的应用可以说是非常的普遍了,二维码在应用之前不但需要条码打印机批量打印二维码,还需要相关的二维码制作软件制作二维码.今天小编就教大家用TSC TTP-244条码打印机批量打印二维码. 1.打开二 ...
- Deli条码打印机如何批量打印二维码
如题,今天小编就和大家说说Deli条码打印机如何批量打印二维码,除了必须的Deli条码打印机外,还需要条码打印软件,用来生成二维码,话不多活,接下来我们就看先是如何实现的. 把Deli条码打印机和电脑 ...
- JS前端调用TSC打印二维码、条码
公司让用js调用TSC打印二维码,本人已调试成功,希望大家有所帮助! ActiveX下载地址:ActiveX下载地址! 实现代码:JS前端调用TSC打印二维码实现代码 <HTML> < ...
- 如何使用百数批量打印二维码?
为了让用户更加方便的通过手机查看数据,百宝云支持数据二维码批量打印,用户只需要扫描二维码就可以查看该二维码对应的数据. 操作步骤 [选择目标表单]--[数据管理]--[批量操作]--[批量打印二维码] ...
- 得力标签批量打印二维码
得力标签批量打印二维码 最近公司要求做一个二维码标签打印, 网上搜索了很多..期间实验了多种方案: 1 javax.print 打印(离线本地打印,无法做到只要用户有打印机就可以) 2 网页打印(将图 ...
- vue项目中批量打印二维码
前提:项目中要打印的二维码为后台返回,批量选择后,点击打印,先打开二维码预览界面,再执行打印. 以下代码中 codePicList为选中的二维码数组.重点css:page-break-after:al ...
- 批量打印二维码的软件---使用心得(领跑条码标签打印软件)
这不是广告,不是广告,不是广告! 感谢 前人的教程:http://blog.sina.com.cn/s/blog_a2e22c120101kcwl.html 公司软件需要支持二维码批量打印功能,公司考 ...
- QT编程 批量打印二维码
1.下载打印机驱动,驱动下载在资源列表里 2.QT编程 打印机初始化 3.打印机命令网上有文档,QRCODE命令打印二维码,内容自定义 主要是设置打印亚银纸张 长宽大小.字体大小.打印纸张位置,二维码 ...
- TSC 标签打印机,使用TSPL指令,前端 jsp 调用打印二维码和文本标签的案例
因为需要调用打印机封装好的DLL文件,只能在IE下使用ActiveX来调用,直接使用tspl指令来打印.只在前台调用,所以后台什么也不需要,但是客户端需要进行配置,首先要安装打印机驱动,然后注册DLL ...
最新文章
- 引用安装好的pywin,出现“ModuleNotFoundError: No module named 'win32api'”提示
- 多线程并发:每个开发人员都应了解的内容
- editplus替换空白行的正则表达式
- openstack 网络简史
- Misc(网络+组成原理)
- windows php fastcgi,windows下FastCGI(php-cgi)的工作原理和配置
- JWT—JSON Web Token - 理解JWT网络间应用用户安全认证交互设计
- kafka consumer group 定义
- 【渝粤教育】国家开放大学2018年秋季 0321-21T学前心理学 参考试题
- Unstated浅析
- 游戏脚本代码大全_如何用5行Python代码写出刷分游戏脚本!Python真牛!
- 每日作业-品优购详情页
- Gym - 101808K Another Shortest Path Problem (Damascus University Collegiate)【并查集+LCA】
- 二行代码解决全部网页木马
- 财会行业男女薪资比例matlab,2004:会计师事务所薪资调查分析报告
- dns解析失败故障问题解决两例
- sx1278lora模块的常见问题解答
- Pandas中透视表和交叉表
- yml配置文件的文件格式简单介绍
- python作业爬取xxx大学排行