asp.net中的“按需打印”(打印你需要打印的部分)

yellowone

关注

阅读 123

2023-02-28


有时我们需要对asp.net网页中某些特定部分进行打印,很多人采用CSS样式或特定的打印控件来解决网页定制打印功能。这里采用Javascript样式替换方式进行打印,使网页显示与打印效果相分离。

过程很简单:

首先在asp.net页面中设定开始打印和结束打印的标记,为了确保该标记不在网页浏览时显示,我们采用"<!-- HTML注释 -->"的方式。比如:<!--startprint-->和<!--endprint-->

接着写相关的JavaScript代码,具体代码见后。

如果不想打印按钮也被打印出来,注意将打印按钮包含在<!--startprint-->和<!--endprint-->之外。

相关代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AppealPrint.aspx.cs" Inherits="Appeal.AppealPrint" 
MasterPageFile="MasterPage.master" Title="诉求打印" %>


<asp:Content ID="Content1" ContentPlaceHolderID="CphNavigation" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="CphContent" runat="server">

<!--startprint-->
<style type="text/css">

body,table{

font-size:12px;

}

table{

table-layout:fixed;

empty-cells:show;

border-collapse: collapse;

margin:0 auto;

}

td{

height:20px;

}

h1,h2,h3{

font-size:12px;

margin:0;

padding:0;

}



table{

border:1px solid #cad9ea;

color:#666;

}

table th{

height:30px;

}

table td,table th{

border:1px solid #cad9ea;

padding:0 1em 0;

}

table tr{

background-color:#f5fafe;

}

</style>

<table class="border" cellspacing="0" cellpadding="2" style="margin: 0px auto; width: 98%;border:1px solid;border-collapse:collapse;" id="TabBtnPrint">

<tbody>

<tr align="center">

<td class="title"><strong>诉 求 信 息</strong></td>

</tr>

<tr>

<td style="height: 25px">

<table cellspacing="1" cellpadding="2" style="margin: 0px auto; width: 100%;border-collapse:collapse;">

<tbody>

<tr class="tdbg">

<td width="30%" align="right" nowrap="nowrap">诉求主题:</td>

<td colspan="3">

<asp:Label ID="lblEditTitle" runat="server" Text="Label"></asp:Label>

</td>

</tr>

<tr class="tdbg">

<td align="right" width="30%" nowrap="nowrap">诉求类型:</td>

<td colspan="3">

<asp:Label ID="lblAppealCategory" runat="server" Text=""/>

</td>

</tr>

<tr class="tdbg">

<td align="right" width="30%" nowrap="nowrap">诉求当前状态:</td>

<td colspan="3">

<asp:Label ID="LblStatus" runat="server" Text="Label"/>

</td>

</tr>

<tr class="tdbg">

<td align="right" style="width: 30%" nowrap="nowrap">诉求性质:</td>

<td style="width: 15%"><asp:Label ID="lblAppealNature" runat="server" Text="Label"/></td>

<td align="right" style="width: 25%" nowrap="nowrap">被投诉人姓名:</td>

<td style="width: 30%"><asp:Label ID="lblBeAppealName" runat="server" Text="Label"/></td>

</tr>



<tr class="tdbg">

<td align="right" style="width: 30%" nowrap="nowrap">被投诉人地址:</td>

<td style="width: 15%"><asp:Label ID="lblBeAppealAddress" runat="server" Text="Label"/></td>

<td align="right" style="width: 25%" nowrap="nowrap">投诉人:</td>

<td style="width: 30%"><asp:Label ID="lblUserName" runat="server" Text="Label"/></td>

</tr>



<tr class="tdbg">

<td align="right" style="width: 30%" nowrap="nowrap">诉求信息是否保密:</td>

<td style="width: 15%"><asp:Label ID="lblIsSecret" runat="server" Text="Label"/></td>

<td align="right" style="width: 25%" nowrap="nowrap">管理员是否同意公开:</td>

<td style="width: 30%" align="right"><asp:Label ID="lblAdminIsPublic" runat="server" Text="Label"/></td>

</tr>



<tr class="tdbg">

<td align="right" style="width: 30%" nowrap="nowrap">浏览数:</td>

<td style="width: 15%"><asp:Label ID="lblHits" runat="server" Text="Label"/></td>

<td align="right" style="width: 25%" nowrap="nowrap">回复数:</td>

<td style="width: 30%"><asp:Label ID="lblReply" runat="server" Text="Label"/></td>

</tr>



<tr class="tdbg">

<td align="right" style="width: 30%" nowrap="nowrap">归档:</td>

<td style="width: 15%"><asp:Label ID="lblCategory" runat="server" Text=""/></td>

<td align="right" style="width: 25%" nowrap="nowrap">诉求提交时间:</td>

<td style="width: 30%"><asp:Label ID="lblCreateTime" runat="server" Text="Label"/></td>

</tr>



<tr class="tdbg">

<td align="right" style="width: 30%" nowrap="nowrap">诉求所在地域:</td>

<td colspan="3"><asp:Label ID="lblRegion" runat="server" Text=""></asp:Label></td>

</tr>

<tr class="tdbg">

<td colspan="4"><asp:Label ID="Label2" runat="server" Text=""/></td>

</tr>

<tr class="tdbg">

<td colspan="4" align="left" valign="top" nowrap="nowrap">诉求内容:</td>

</tr>

<tr class="tdbg">

<td colspan="4" align="left" valign="top">

<pe:ExtendedLiteral ID="LtrEditContent" runat="server" HtmlEncode="false"/>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<!--endprint-->
<br />

<div id="divBtnPrint" style="text-align:center">

<input id="BtnPrint" type="button" value="打 印…" οnclick="
doPrint();" />

</div>

<br />

<script type="text/javascript">
<!--
function
doPrint(){

bdhtml = window.document.body.innerHTML;

sprnstr = "
<!--startprint-->";

eprnstr = "
<!--endprint-->";

prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);

prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));

window.document.body.innerHTML = prnhtml;

var obj = window.document.body;


doZoom(obj, 18); //放大打印
window.print();
}


function
doZoom(artibody, size) {

if (!artibody)

{

return;

}


setChildNodesByCurrentNode(artibody,size);

}


function
setChildNodesByCurrentNode(node,size) {

for(var i=0; i < node.childNodes.length; i++) {

var artibodyChild = node.childNodes[i];

if (artibodyChild.nodeType == 1) {

artibodyChild.className="";

artibodyChild.style.fontSize = size + 'px';

artibodyChild.style.fontFamily = '仿宋_GB2312,宋体,"Times New Roman",Georgia,serif';

artibodyChild.style.fontWeight = 900;

if(artibodyChild.childNodes.length>0) {

setChildNodesByCurrentNode(artibodyChild,size);

}

}

}

}
-->
</script>

</asp:Content>

观察上面代码可以看出,打印时,window.document.body.innerHTML 被重新赋值成设定需要打印的网页部分的代码(这里是 prnhtml),然后通过递归方式调用setChildNodesByCurrentNode(artibody,size)更改相关子节点的样式,以达到全部更换相关字体大小及样式设置的目的。

一切尽在源码中,不再赘述。

精彩评论(0)

0 0 举报