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

首先在网页中插入如下的代码，需要传递给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><a 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>