使用jQuery和CSS控制頁面列印範圍

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

使用方法介紹：

CSS控制頁面列印範圍

使用CSS控制列印樣式，需要設定樣式media="print"，並且將頁面中不需要列印的元素的樣式display屬性設定為none。如DEMO中，我將頁頭頁尾及其他不需要列印的元素的樣式設定如下：

<style type="text/css" media="print"> #header,.top_title,#jqprint,#footer,#cssprint h3{display:none} </style> jQuery控制頁面列印範圍這裡我要給大家介紹一個jQuery列印外掛程式printArea.js。該外掛程式使用簡單，可以實現控制列印頁面中指定的地區。
DEMO中有這樣一段代碼：
<p><a href="#" id="print_btn">點擊這裡列印>></a></p> <div id="my_area">       ...列印範圍...<br/> </div> 
我們需要列印ID為my_area的DIV地區，只需要加入以下代碼：
$(function(){     $("#print_btn").click(function(){         $("#my_area").printArea();     }); }); 
當單擊列印按鈕時，調用件printArea.js外掛程式。該外掛程式還提供了一些參數可配置，使用方法：$(element).printArea(option)。
參數設定：
1、mode：模式，當點擊列印按鈕時觸發模式，預設為iframe，當設定為popup則會新開一個視窗頁面列印。
2、popTitle：設定新開視窗的標題，預設為空白。
3、popClose：完成列印後是否關閉視窗，預設為false。
PS：IE瀏覽器列印頁面取出頁首頁尾網址的方法：檔案->版面設定，將頁面和頁尾的輸入框清空即可。
外掛程式原始碼：
(function($) {    var counter = 0;    var modes = { iframe : "iframe", popup : "popup" };    var defaults = { mode     : modes.iframe,                     popHt    : 500,                     popWd    : 400,                     popX     : 200,                     popY     : 200,                     popTitle : '',                     popClose : false };
    var settings = {};//global settings
    $.fn.printArea = function( options )        {            $.extend( settings, defaults, options );
            counter++;            var idPrefix = "printArea_";            $( "[id^=" + idPrefix + "]" ).remove();            var ele = getFormData( $(this) );
            settings.id = idPrefix + counter;
            var writeDoc;            var printWindow;
            switch ( settings.mode )            {                case modes.iframe :                    var f = new Iframe();                    writeDoc = f.doc;                    printWindow = f.contentWindow || f;                    break;                case modes.popup :                    printWindow = new Popup();                    writeDoc = printWindow.doc;            }
            writeDoc.open();            writeDoc.write( docType() + "<html>" + getHead() + getBody(ele) + "</html>" );            writeDoc.close();
            printWindow.focus();            printWindow.print();
            if ( settings.mode == modes.popup && settings.popClose )                printWindow.close();        }
    function docType()    {        if ( settings.mode == modes.iframe || !settings.strict ) return "";
        var standard = settings.strict == false ? " Trasitional" : "";        var dtd = settings.strict == false ? "loose" : "strict";
        return '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01' + standard + '//EN" "http://www.w3.org/TR/html4/' + dtd +  '.dtd">';    }
    function getHead()    {        var head = "<head><title>" + settings.popTitle + "</title>";        $(document).find("link")            .filter(function(){                    return $(this).attr("rel").toLowerCase() == "stylesheet";                })            .filter(function(){ // this filter contributed by "mindinquiring"                    var media = $(this).attr("media");                    return (media.toLowerCase() == "" || media.toLowerCase() == "print")                })            .each(function(){                    head += '<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >';                });        head += "</head>";        return head;    }
    function getBody( printElement )    {        return '<body><div class="' + $(printElement).attr("class") + '">' + $(printElement).html() + '</div></body>';    }
    function getFormData( ele )    {        $("input,select,textarea", ele).each(function(){            // In cases where radio, checkboxes and select elements are selected and deselected, and the print            // button is pressed between select/deselect, the print screen shows incorrectly selected elements.            // To ensure that the correct inputs are selected, when eventually printed, we must inspect each dom element            var type = $(this).attr("type");            if ( type == "radio" || type == "checkbox" )            {                if ( $(this).is(":not(:checked)") ) this.removeAttribute("checked");                else this.setAttribute( "checked", true );            }            else if ( type == "text" )                this.setAttribute( "value", $(this).val() );            else if ( type == "select-multiple" || type == "select-one" )                $(this).find( "option" ).each( function() {                    if ( $(this).is(":not(:selected)") ) this.removeAttribute("selected");                    else this.setAttribute( "selected", true );                });            else if ( type == "textarea" )            {                var v = $(this).attr( "value" );                if ($.browser.mozilla)                {                    if (this.firstChild) this.firstChild.textContent = v;                    else this.textContent = v;                }                else this.innerHTML = v;            }        });        return ele;    }
    function Iframe()    {        var frameId = settings.id;        var iframeStyle = 'border:0;position:absolute;width:0px;height:0px;left:0px;top:0px;';        var iframe;
        try        {            iframe = document.createElement('iframe');            document.body.appendChild(iframe);            $(iframe).attr({ style: iframeStyle, id: frameId, src: "" });            iframe.doc = null;            iframe.doc = iframe.contentDocument ? iframe.contentDocument : ( iframe.contentWindow ? iframe.contentWindow.document : iframe.document);        }        catch( e ) { throw e + ". iframes may not be supported in this browser."; }
        if ( iframe.doc == null ) throw "Cannot find document.";
        return iframe;    }
    function Popup()    {        var windowAttr = "location=yes,statusbar=no,directories=no,menubar=no,titlebar=no,toolbar=no,dependent=no";        windowAttr += ",width=" + settings.popWd + ",height=" + settings.popHt;        windowAttr += ",resizable=yes,screenX=" + settings.popX + ",screenY=" + settings.popY + ",personalbar=no,scrollbars=no";
        var newWin = window.open( "", "_blank",  windowAttr );
        newWin.doc = newWin.document;
        return newWin;    }})(jQuery);

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More