关于MVC打印问题,打印指定的内容
首先你的内容一定要放在一个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="width: 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="width: 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="width: 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="width: 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="width: 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="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>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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!