打印及批量打印

總述：引入打印的JS文件，把需要打印的內容window.print()打印出來即可。注：print（）可設置參數，如不需要打印的內容。

//打印
$("#print").click(function(e){
$(".box").print({
globalStyles: true,
mediaPrint: false,
stylesheet: null,
noPrintSelector: ".no-print",
iframe: true,
append: null,
prepend: null,
manuallyCopyFormValues: true,
deferred: $.Deferred()
});
});

一、單頁打印：

引入JS和添加打印JS代碼：

<script type="text/javascript" src="{{ asset('js/jQuery.print.js') }}"></script>
<script>
//打印
$("#print").click(function(e){
$(".box").print({
globalStyles: true,
mediaPrint: false,
stylesheet: null,
noPrintSelector: ".no-print",
iframe: true,
append: null,
prepend: null,
manuallyCopyFormValues: true,
deferred: $.Deferred()
});
});
</script>
頁面添加打印按鈕：

<input class="no-print" type="button" id="print" value="打印" style="position:absolute;left:720px;top:20px;border:none;background-color:#4eb1e2;color:#FFF;width:60px;border-radius:4px;font-size:16px;margin-bottom:5px">
二、批量打印：

思路：獲取到每個選中的複選框的值（如下圖），用get同步請求拿回頁面內容存入隱藏的div後，用該div的內容替換掉body中的所有內容進行打印，打印之後再換回原內容。

 

td最前列增加複選框：

<td><input type="checkbox" name="sid" value="你請求路由需要的值"></td>
頁面增加批量打印功能鍵：

<div id="js_print_content" style="display:none"></div>
<div class="mt20">
<div>
<input class="all_ckx" type="checkbox">
</div>
<div style="float:left;overflow: hidden;">
<span><span id="sel_num">0</span>/{{ count(當前頁面數據的數組) }}</span>
</div>
<input type="button" id="print" class="printBtn" value="批量打印">
</div>
JS部分代碼：

//批量打印功能

//單選後更新下面已選中的數量顯示
$(document).on("click","input[name='sid']",function () {
$("#sel_num").text($("[name=sid]:checkbox:checked").length);
});

//全選/全不選功能
$(document).on("click",".all_ckx",function () {
if ($(this).is(":checked")) {
$("[name=sid]:checkbox").prop("checked", true);
$("#sel_num").text($("[name=sid]:checkbox:checked").length);
} else {
$("[name=sid]:checkbox").prop("checked", false);
$("#sel_num").text(0);
}
});
//批量打印功能按鈕 獲取到每個選中的複選框的值，用get同步請求拿回頁面內容存入隱藏的div後，用該div的內容替換掉body中的所有內容進行打印，打印之後再換回原內容
$("#print").click(function(){
var index = layer.load(1);
setTimeout(()=>{
//獲取每個已選中的複選框的值並調用get同步請求回頁面數據後，追加到隱藏的div中
$("input[name='sid']:checked").each(function(){
var sid = $(this).val();
var n=sid.indexOf('&');
var bid = sid.substring(0,n);
var type = sid.substring(n+1);
$.ajax({
async:false,
type:'get',
url:'{{ route("less_money") }}',
data:{
bid:bid,
type:type,
bill_jump:1
},
success:function(data){
$("#js_print_content").append('<div style="page-break-after:always;">'+data+'</div>');
$("#js_print_content").append('<link rel="stylesheet" href="{{ asset('css/settle.css') }}">');
}
});
});
if($('.leaf').length<=0){
layer.msg('請勾選需要打印的賬單');
layer.close(index);
return false;
}
//獲取隱藏div中的內容
var newstr = $("#js_print_content").html();
//用隱藏的div中的內容替換掉當前頁面上的內容
var oldstr = $("body").prop("outerHTML");
$("body").html(newstr);
setTimeout(()=>{
//調用打印功能
window.print();
//返回之前的內容頁面
location.reload();
//清空隱藏的div中的內容
$("#js_print_content").html("");
});
});
});
————————————————
版權聲明：本文爲CSDN博主「guozhouyuan」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qvanminpiao/article/details/88892671