浏览器打印功能：(打印部分)

最新推荐文章于 2022-11-09 13:41:09 发布

转载最新推荐文章于 2022-11-09 13:41:09 发布 · 1.5k 阅读

文章标签：

#浏览器 #打印

总结专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用CSS和JavaScript实现网页局部打印的方法。通过设置特定的CSS样式使部分元素不被打印，并利用JavaScript触发打印功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：http://www.chinaz.com/design/2008/0523/29743.shtml

一.实例

（1）css

    <style media="print" type="text/css">
         .Noprint { DISPLAY: none }
         .PageNext{ PAGE-BREAK-AFTER: always }
   </style>

（2）js

    <script type="text/javascript">
        $(function () {
            $("#test").click(function () {
                window.print();
            });
        });
    </script>

（3）aspx

            <div id="select" class="Noprint">
                节假日名称
                <sjt:HolidayDropDownList ID="ddlHoliday" runat="server" Width="200px" CssClass="ddlCss" />
                节假日第几天
                <sjt:HolidayDayDropDownList runat="server" ID="ddlHolidayDay" Width="100px" CssClass="ddlCss" />
                <asp:Button runat="server" ID="btnSearch" Text="查  询" Width="70px" />
                <asp:Button runat="server" ID="test" Text="打印" Width="70px" />
            </div>
            <div id="main" class="PageNext">
                <iframe name="frChart" id="frTarget" runat="server" src="" scrolling="yes" frameborder="0"></iframe>
            </div>

二.解释：
（1）两个关键的CSS
<style media="print">
.Noprint { DISPLAY: none }
.PageNext{ PAGE-BREAK-AFTER: always }
</style>
第一个在不需要打印的标签上添加（子标签也将不被打印），
第二个在需要换行的标签处添加（该标签所表示的内容将在当前打印的一页内）
（2）接下来通过调用最基本的js语句
window.print()就可实现页面局部打印了！