首先你的内容一定要放在一个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="" aria-controls="DataTables_Table_0" rowspan="" colspan="" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 140px;">用户名ID</th>
<th class="sorting" role="columnheader" tabindex="" aria-controls="DataTables_Table_0" rowspan="" colspan="" aria-label="Browser: activate to sort column ascending" style="width: 180px;">用户名</th>
<th class="sorting" role="columnheader" tabindex="" aria-controls="DataTables_Table_0" rowspan="" colspan="" aria-label="Platform(s): activate to sort column ascending" style="width: 160px;">电话</th>
<th class="sorting" role="columnheader" tabindex="" aria-controls="DataTables_Table_0" rowspan="" colspan="" aria-label="Engine version: activate to sort column ascending" style="width: 140px;">真实姓名</th>
<th class="sorting" role="columnheader" tabindex="" aria-controls="DataTables_Table_0" rowspan="" colspan="" aria-label="CSS grade: activate to sort column ascending" style="width: 140px;">工号</th>
<th class="sorting" role="columnheader" tabindex="" aria-controls="DataTables_Table_0" rowspan="" colspan="" aria-label="CSS grade: activate to sort column ascending" style="width: 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>)
{
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 + / OSX.+</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 + / OSX.+</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>