Bootstrap modal弹出框实现打印的功能

匿名 (未验证) 提交于 2019-12-03 00:37:01

html 页面:

<div class="modal fade" id="popPrintSheet" role="dialog" aria-labelledby="printSheet" aria-hidden="true"  data-backdrop="static" data-keyboard="false">     <div class="modal-dialog middle-size">         <div class="modal-content marginT20px">         	<div class="modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                 <h4 class="modal-title" id="printSheetTitle" >CoverSheet Print</h4>             </div>             <div class="modal-body left20pc-right" style="height:800px; overflow:scroll;"> 	            <div id="showCoverSheetTmpl" style="display: none;"></div>             </div> 		</div> 	</div> </div>

class="modal-body 可以 设置一些样式,控制内容,

js:

通过事件把上面的 modal 弹出,$("#popPrintSheet").modal();

这个页面上也可以增加一个 打印的按钮直触发输内容;

下面的是 打印方法:

var printpage = function (myDiv){     		var printHtml = document.getElementById(myDiv).innerHTML; 		var wind = window.open("", "newwin", "toolbar=no,scrollbars=yes,menubar=no"); 		var ss = "<style>" 				+".coversheet-pageBoder{" 				+"	padding: 10px;"  				+"	margin-top: 10px;" 				+"	border: 1px solid gray;" 				+"	page-break-after: always;" 				+"	border-radius: 5px;" 				+"	box-shadow: 0 1px 2px 1px rgba(0,0,0,.08), 0 3px 6px rgba(0,0,0,.08);" 				+"}" 				+".noprint{display: none;}" 				+"</style>"; 		 		printHtml = ss + printHtml; 		wind.document.body.innerHTML = printHtml; 		wind.print(); 		wind.close(); 	};

mydiv 输出内容的div

ss可以增加一些样式 控制弹出页面;

wind.close() 最好是加上,可以控制打印窗口关闭后 直接 关闭新打开的窗口。


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!