jQueryPrint打印

本文介绍了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>
```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值