doPrint:function(){ var headhtml = "<html><head><title></title></head><body>"; var foothtml = "</body>"; // 获取div中的html内容 // var newhtml = document.all.item(printpage).innerHTML; // 获取div中的html内容，jquery写法如下 var newhtml = $("#printdeliveryView").html(); // 获取原来的窗口界面body的html内容，并保存起来 var oldhtml = document.body.innerHTML; // 给窗口界面重新赋值，赋自己拼接起来的html内容 document.body.innerHTML = headhtml + newhtml + foothtml; // 调用window.print方法打印新窗口 //app.PageSetup_Null() ; window.print(); //app.PageSetup_Default() ; // 将原来窗口body的html值回填展示 document.body.innerHTML = oldhtml; }, PageSetup_Null: function (){ try{ var RegWsh = new ActiveXObject("WScript.Shell") ; app.hkey_key = "header" ; RegWsh.RegWrite(app.hkey_root + app.hkey_path + app.hkey_key,"") ; app.hkey_key = "footer" ; RegWsh.RegWrite(app.hkey_root + app.hkey_path + app.hkey_key,"") ; } catch(e){} }, PageSetup_Default: function (){ try{ var RegWsh = new ActiveXObject("WScript.Shell") ; app.hkey_key = "header" ; RegWsh.RegWrite(app.hkey_root + app.hkey_path + app.hkey_key,"&w&b页码，&p/&P") ; app.hkey_key = "footer" ; RegWsh.RegWrite(app.hkey_root + app.hkey_path + app.hkey_key,"&u&b&d") ; } catch(e){} }
<div class="Payment_content_fukuan" style="cursor:pointer;display:none;margin-right: 50px;" v-on:click="doPrint()">打印</div> <div style="100%;height:640px;overflow-y:auto;margin:0;padding:0;" id="printdeliveryView"> <table class="Payment_listdy" id="tableyue" style="95%;"> <tr><td colspan="11"><h3><b>支付单付款明细</b></h3></td></tr> <tr> <th style="50px;">日期</th> <th >供应商</th> <th >审核人</th> <th >支付状态</th> <th >实付额</th> <th >零头</th> <th >服务顾问</th> <th >收款人</th> <th >账号</th> <th >开户行</th> <th >备注</th> </tr> <tbody id="FinancialPaymentList"> <tr v-for="(item,index) in list" v-bind:id="'fukuan'+(index)" class="tabledayin"> <td style="50px;white-space: nowrap;font-size: .12rem;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.80);">{{FormatDate(item.Create_Date)}}</td> <td style="text-align: left">{{item.Customer_Name}}</td> <td >{{item.Audit_SubUserName}}</td> <td >{{item.Status==3?'已审核':'已付款'}} </td> <td style="text-align:right;padding-right:10px;">{{item.Amount.toFixed(2)}}</td> <td style="text-align:right;padding-right:10px;">{{item.SmallChange.toFixed(2)}}</td> <td >{{item.Sub_UserName}}</td> <td style="text-align: left">{{item.Account_User}}</td> <td >{{item.Account_Number}}</td> <td style="text-align: left">{{item.Account_Bank}}</td> <td >{{item.Remark}}</td> </tr> </tbody> </table> </div>
这里是打印这个页面的功能，table宽要比插入的标签printdeliveryView小，否则打印不全，样式写在行内，还没有成功使用样式表来控制打印样式
//打印 dayin: function () { //拿到勾选的数据传参给弹出页面 var inputs = document.getElementById("FinancialPaymentList").getElementsByTagName("input"); var rows = ""; //这里应该是付款单号 for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "checkbox") { if (inputs[i].checked) { rows += $(inputs[i]).attr('danhao') + ","; //rows += inputs[i].value + ","; } } } if (rows == '') { $.dialog.alert("请选择要打印的数据"); return; } //最后做一下截字 var ids = rows.substr(0, rows.length - 1);//从索引0开始截取row.length-1个字符 //console.log(ids); var dialog = $.dialog({ title: '打印', content: 'url:/Collection/PrintingTable?PaymentMaster_No=' + ids, 1400, height: 800, zIndex:1000, }); }
这里是勾选后打印按钮弹出已选页面的功能，遍历勾选的数据，将value值组合成逗号分隔的字符串，再去掉末尾逗号，通过dialog弹窗，url传参，给弹出的页面，对象里设置弹窗属性