现在的位置: 首页 > 综合 > 正文

在网页中支持部分区域的打印

2012年11月20日 ⁄ 综合 ⁄ 共 3314字 ⁄ 字号 评论关闭

首先在网页中插入如下的代码,需要传递给doPrint()函数的是需要打印的html代码,然后参考如下的代码

 1<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderBody" runat="Server">
 2    <div id="print_id" class="ModuleFrame">
 3        <dl>
 4            <dt>文件摘要</dt>
 5            <dd>
 6                文件标题:<asp:Literal ID="FileFriendlyName" runat="server"></asp:Literal>
 7            </dd>
 8            <dd>
 9                文件目录:<asp:Literal ID="Category" runat="server"></asp:Literal>
10            </dd>
11            <dd>
12                发布者:<asp:Literal ID="CreatedByUser" runat="server"></asp:Literal>
13            </dd>
14            <dd>
15                发布日期:<asp:Literal ID="CreatedDate" runat="server"></asp:Literal>
16            </dd>
17        </dl>
18        <dl>
19            <dt>文件内容</dt>
20            <dd>
21                <div id="Description" runat="server">
22                </div>
23            </dd>
24            <dt><href="javascript:doPrint(this.document.getElementById('print_id').innerHTML);">
25                【打印】</a></dt>
26        </dl>
27    </div>
28</asp:Content>

 

    <script language="JavaScript" type="text/JavaScript">
<!--
function doPrint(_html) {
    
if (window.print)
    
{
       
// var Div1 = this.document.getElementById("Holder");
        //var Div2 = document.all.Div2.innerHTML;
        // *****************************************************
        // Div1、Div2即为你在打印的区域
        // 这里根据你要打印的哪些内容,从原显示页面中用
        // <div id=Div1>Div1.</div><div id=Div2>Div2</div>
        // 等标示出来,要打印多少项目就标示多少
        // ***************************************************** 
        var css = '<style type="text/css" media=all>+
        'p 
{ line-height: 120%}+
        '.ftitle 
{ line-height: 120%; font-size: 18px; color: #000000}+
        'td 
{ font-size: 10px; color: #000000}+
        '
</style>' ;
        
// *****************************************************
        // 定义打印用的CSS,具体你想打印出什么样的格式全看你自己
        // 了,但要注意:如果此处有什么同网页中不一致的,可能打印
        // 出来的页面同网页格式、字体可能会有所不同
        // *****************************************************
        var body ='<table width="100%" align="left" border="0" cellspacing="0" cellpadding="5">+
        ' 
<tr> ' +
        ' 
<td class="fbody"> ' +
        ' 
<div align="left" class=ftitle>+ _html + '</div>'+
        ' 
</td>+
        ' 
</tr>+
        '
</table>';
        
// ******************************************************
        // 在此处重新设置的打印格式,根据你的打印要求,将原显示的
        // 网页的DIV内容重新组合,可以根据你原来的表格内容,去掉
        // 不要打印的,你也可以能下面定义的noprint忽略掉你不想打
        // 印的东西,只调用你要打印的内容,但这样被忽略掉的地方将
        // 打印出空,不是很美观。表格宽度要同打印的纸张宽度匹配。
        // ******************************************************

        
//var oldBody=document.body.innerHTML;
        document.body.innerHTML = '<center>+ css + body + '</center>';
        
// ******************************************************
        // 重设document.body,打印文档准备就绪
        // ******************************************************
        window.print();
        window.history.go(
0);
        
//document.body.innerHTML=oldBody;
        // ******************************************************
        // 调用打印命令,打印当前窗口内容。当你打印时其实是一张新
        // 的网页了,但网页文件还是原先的。紧接着调用
        // window.history.go(0),再回到打印前的页面,效果相当不差
        // ******************************************************
    }

}

-->
    
</script>

    
<style>
@media print 
{
.noprint 
{display:none}
}

</style>

抱歉!评论已关闭.