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

 第一步 :html 设置DIV,用于存放批量生成的二维码 

< div class= "x_panel" style= "margin:0 auto;display:none;" id= "qrcode2" > div >

第二部:获取选中行的数据

1 获取选中行数据,点击全选或者选中多个

< table class= "table table-striped jambo_table bulk_action" id= 'test_table' >

< thead >

< tr class= "headings" >

< th width= "60" >< label >

< input type= "checkbox" v-model= 'all_check' @ click= "changecheck" />

label >全选

th >

< th >

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" >< span class= "nobr" >动作 span >

th >

< th class= "bulk-actions" colspan= "7" >

< a class= "antoo" style= "color:#fff; font-weight:500;" >( < span class= "action-cnt" > span > ) < i class= "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 >< input name= '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= "last" >

< a class= "btn btn-info btn-xs" @ click= "edittempobj(tempobj,index)" >< i class= "fa fa-pencil" > i >修改 a >

< a class= "btn btn-danger btn-xs" @ click= "deletetempobj(tempobj,index)" >< i class= "fa fa-trash-o" > i >删除 a >

< a class= "btn btn-success btn-xs" @ click= "qrcoderepair(tempobj,index)" >< i class= "fa fa-qrcode" > i >设备二维码 a >

td >

tr >

tbody >

table >

 2 显示选中框

methods: {

//点击全选时

changecheck: function(){

for( var i= 0; i< vm. items. length; i++){

vm. items[ i]= vm. all_check;

}

},

< button class= "btn btn-default source" onclick= "doPrint()" >< i class= "glyphicon glyphicon-plus" >批量打印二维码 i > button >

3 点击 批量打印二维码时

< button class= "btn btn-default source" onclick= "doPrint()" >< i class= "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( var i= 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+= '

';

html += '

设备名称:';

html += ' '+ item. name + '

'; //设备名称

html += '

设备规格:';

html += ' '+ item. serialnum+ '

'; //设备规格

html += '

ID号:';

html += ''+ item. id+ '

' //ID号

html += '

编码:';

html += ''+ '

'; //编码

html += '

';

html += ' 扫码呼叫服务

'; //扫码呼叫服务

html += '

+ index+ '\" style=\"width:100%;height:100%;\">

'; //二维码

});

$( "#qrcode2"). append( html);

var head_str = ''; //先生成头部

var foot_str = ""; //生成尾部

//var older = document.body.innerHTML;

var new_str = document. getElementById( "qrcode2"). innerHTML; //获取指定打印区域

//构建新网页(关键步骤,必须先构建新网页,在生成二维码,否则不能显示二维码)

document. body. innerHTML = head_str + new_str + foot_str;

for( var i= 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;

}