首先你的内容一定要放在一个div中如下代码
<div id="divprint"> <table class="table table-striped dataTable table-bordered" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info"> <thead> <tr role="row"> <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style=" 140px;">用户名ID</th> <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style=" 180px;">用户名</th> <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style=" 160px;">电话</th> <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style=" 140px;">真实姓名</th> <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending" style=" 140px;">工号</th> <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending" style=" 167px;">拥有角色</th> </tr> </thead> <tbody role="alert" aria-live="polite" aria-relevant="all"> @foreach (var item in Model.EntityList) { <tr> <td class=" sorting_1">@item.OneUser.Uid</td> <td class=" ">@item.OneUser.UserName</td> <td class=" ">@item.OneUser.Tel</td> <td class=" ">@item.OneUser.TrueName</td> <td class=" ">@item.OneUser.WorkNo</td> <td class=" "> @if (item.HasRole!=null&&item.HasRole.Count>0) { foreach (var name in item.HasRole) { <p>@name</p> } } </td> </tr> } <tr class="odd"> <td class=" sorting_1">Gecko</td> <td class=" ">Firefox 1.0</td> <td class=" ">Win 98+ / OSX.2+</td> <td class=" ">1.7</td> <td class=" ">A</td> </tr> <tr class="even"> <td class=" sorting_1">Gecko</td> <td class=" ">Firefox 1.5</td> <td class=" ">Win 98+ / OSX.2+</td> <td class=" ">1.8</td> <td class=" ">A</td> </tr> </tbody> </table> </div> <input type="button" id="btndy" value="打印" />
然后我们看JS代码部分：(注意:因为这里部分打印损坏了HTML代码结构，所以不管你打不打印都要重新加载当前页面，这里我们用window.location.href="/Account/UserManagerMent";或window.reload();）
$(function () { $("#btndy").click(function () { var headstr = "<html><head><title></title></head><body>"; var footstr = "</body>"; var newstr = $("#divprint").html(); // 获取要打印的div内容 var oldstr = document.body.innerHTML; // 将过去的body内容存到oldstr document.body.innerHTML = headstr + newstr + footstr; // 组合打印内容 window.print(); // 弹出打印窗体 document.body.innerHTML = oldstr; // 还原HTML内容 window.location.href="/Account/UserManagerMent"; // 刷新当前页面 }); });
至于后台以前是什么样，现在还是什么样，只是刷新一下而已
小Y子的代码和我的差不多
<button onclick="doPrint()">打印</button> <div id="pri"> 111111111 </div> <script> function doPrint(){ var head_str = "<html><head><title></title></head><body>"; //先生成头部 var foot_str = "</body></html>"; //生成尾部 var older = document.body.innerHTML; var new_str = document.getElementById('pri').innerHTML; //获取指定打印区域 var old_str = document.body.innerHTML; //获得原本页面的代码 document.body.innerHTML = head_str + new_str + foot_str; //构建新网页 window.print(); //打印刚才新建的网页 document.body.innerHTML = older; //将网页还原 return false; } </script>