jQueryPrint打印

最新推荐文章于 2025-07-22 15:17:28 发布

jance_zyx

最新推荐文章于 2025-07-22 15:17:28 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

文章标签： jQueryPrint打印

本文链接：https://blog.youkuaiyun.com/jance_zyx/article/details/90260816

本文介绍了jQuery.print插件的使用方法，包括下载、引入和实际应用到网页打印的步骤，帮助初学者解决打印过程中遇到的问题。通过示例，读者可以了解如何将插件应用于网页内容的打印。

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

jQuery简单易用的网页内容打印插件jQuery.print，由于是初级研究这个插件的使用，当时也碰到许多小问题，今天就跟大家分享一下，希望可以帮助大家解决困扰。如果尝试以后，遇见问题可以评论，如果我看到了，我会积极帮助大家解决的。
一.首先下载一个jQueryPrint
http://www.jq22.com/jquery-info12837（给大家提供一个下载的网址，不过这个网址好像是需要花钱的，如果谁急着需要用到，可以联系我，给你发一份已经下载好的。）
二.下载好的文件夹里面会有一个实例
这是插件里面带的页面效果
三.把这个插件真正用到我们想要打印的页面
1.首先引入js，css样式

2.加入代码 ``` jQuery.Print **//此处为引用的css样式**

</head>
<body>
    <!--[if lt IE 9]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->
    <h3><span> jQuery.print</span></h3>
    <div id="content_holder">
        **//此处为打印的尝试区ele1**
        <div id="ele1" class="a">
            <h3>Element 1</h3>
            <p>
            Some random text.
            <input type="text" value="Dummy input text" />
            </p>
            <button class="print-link no-print" onclick="jQuery('#ele1').print()">
            Print this (jQuery('#ele1').print())
            </button>
        </div>
         **//此处为打印的尝试区ele2**
        <div id="ele2" class="b">
            <h3>Element 2</h3>
            <p>
            Some other random text.
            </p>
            <button class="print-link no-print">
            Print this ($.print("#ele2")) and skip the button (.no-print)
            </button>
        </div>
          **//此处为打印的尝试区ele3**
        <div id="ele3" class="a">
            <h3>Element 3</h3>
            <p class="no-print">
            Some more random text that is not to be printed.
            </p>
            <button class="print-link" onclick="jQuery.print('#ele3')">
            Print this (jQuery.print('#ele3'))
            </button>
        </div>
          **//此处为打印的尝试区ele4**
        <div id="ele4" class="b">
            <h3 class='avoid-this'>Element 4</h3>
            <p>
            Some really random text.
            </p>
            <pre><code>
            **//此处为打印的尝试区ele4的打印内容部分**
            $("#ele4").find('button').on('click', function() {
                //Print ele4 with custom options
                $("#ele4").print({
                    //Use Global styles
                    globalStyles : false,
                    //Add link with attrbute media=print
                    mediaPrint : false,
                    //Custom stylesheet
                    stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata",
                    //Print in a hidden iframe
                    iframe : false,
                    //Don't print this
                    noPrintSelector : ".avoid-this",
                    //Add this at top
                    prepend : "Hello World!!!<br/>",
                    //Add this on bottom
                    append : "<br/>Buh Bye!",
                    //Log to console when printing is done via a deffered callback
                    deferred: $.Deferred().done(function() { console.log('Printing done', arguments); })
                });
            });
            </code></pre>
            **//此处为打印的按钮**
            <button class="print-link avoid-this">
            Print this in a new window, without this button and the title
            </button>
        </div>
        <br/>
        **//此处为打印按钮，并且是弹出页面实现预览效果**
        <button class="print-link" onclick="jQuery.print()">
        Print page - jQuery.print()
        </button>
    </div>
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <script src="jQuery.print.js"></script>
    <script type='text/javascript'>
    //<![CDATA[
    jQuery(function($) { 'use strict';
        $("#ele2").find('.print-link').on('click', function() {
            //Print ele2 with default options
            $.print("#ele2");
        });
        $("#ele4").find('button').on('click', function() {
            //Print ele4 with custom options    
            $("#ele4").print({
                //Use Global styles
                globalStyles : false,   //是否包含父文档的样式，默认为true
                //Add link with attrbute media=print
                mediaPrint : false,  //是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                //Print in a hidden iframe
                iframe : false,   //是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
                //Don't print this
                noPrintSelector : ".avoid-this",    //不想要打印的东西，就在class里面添加这个.avoid-this
                //Add this at top
                prepend : "Hello World!!!<br/>",  //将内容添加到打印内容的前面
                //Add this on bottom
                append : "<br/>Buh Bye!",   //将内容添加到打印内容的后面
                //Log to console when printing is done via a deffered callback
                deferred: $.Deferred().done(function() { console.log('Printing done', arguments); })
            });
        });
    });
    //]]>
    </script>
</body>

```