NodeJs+VueJs +前端实现批量打印二维码

 第一步 :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;
}