0

Twitter Bootstrap のページの各タブをループして、ボタンがクリックされたときにそのタブの内容を印刷しようとしています。つまり、5 つのタブがある場合、すべてのタブをループして、各ページをプリンターに送信します。タブは、ページの読み込み時に動的に作成されます。

今私は持っています：

$("#idBtnPrint").click(function() {
        $("#idUlTab").each(function() {
            if (window.print) {
            $(this).window.print();
            return false;
            }
        });
    });

しかし、それは私にとってはうまくいきません。私はクエリに特に強いわけではありません（おそらく明らかです）-誰か提案を提供できますか？開始するための同等のコードはどこにもありません。

4

2 に答える 2

2

これは、探していることを実行する簡単な小さな jQuery プラグインです。それを使用するには$('#id').print()、ループ内で行うだけです。要素が入っているコンテナも印刷したい場合は、$('#id').print({container: true});

;(function($) {
    $.fn.print = function(opts) {
        return this.each(function() {
            var options = $.extend({}, $.print.defaults, opts), 
                print_frame = $('<iframe id="print_content' + $.print.frame_num + '" scrolling="no" frameborder="0" name="print_frame" border="0"></iframe>'), 
                frame_doc, 
                frame_head, 
                frame_body, 
                html_base = '<!DOCTYPE html><html><head></head><body></body></html>';
            if(options.preview === true) {
                /* Create print modal and overlay */
                var overlay = $('<div id="print_overlay"></div>'), 
                    print_window = $('<div id="print_window"></div>'), 
                    print_controls = $('<div id="print_controls"><a class="print" title="Print">Print</a><a class="cancel" title="Cancel">Cancel</a></div>'), 
                    css = {
                        zIndex: options.zIndex, 
                        top: '0px'
                    };
                overlay.css({
                    width: document.documentElement.clientWidth + 'px', 
                    height: document.documentElement.clientHeight + 'px', 
                    zIndex: options.zIndex - 1
                }).appendTo('body');
                print_controls.find('a').click(function(e) {
                    e.preventDefault();
                    if($(this).hasClass('print')) {
                        print_frame[0].contentWindow.focus();
                        print_frame[0].contentWindow.print();
                    }
                    else {
                        $.print.destroy();
                    }
                });
                print_window
                    .append(print_controls)
                    .append(print_frame)
                    .css(css)
                    .appendTo('body');
                $(window).bind('resize.print', function(e) {
                    overlay.css({
                        width: document.documentElement.clientWidth + 'px', 
                        height: document.documentElement.clientHeight + 'px'
                    });
                }).bind('scroll.print', function(e) {
                    overlay.css({
                        top: document.documentElement.scrollTop + 'px', 
                        left: document.documentElement.scrollLeft + 'px'
                    });
                });
            }
            else {
                print_frame.appendTo('body');
            }

            frame_doc = $('#print_content' + $.print.frame_num)[0].contentWindow.document;
            frame_doc.open();
            frame_doc.write(html_base);
            frame_doc.close();

            /* Append the correct headers to the iframe */
            frame_head = $('head link[media="print"], head link[media="all"]').clone().each(function() {
                $(this).attr('media', 'all'); //In case a preview is being shown, show everything
            });
            if(options.container === true) {
                frame_body = $(this).clone().show();
            }
            else {
                frame_body = $(this).children().clone();
            }

            /* Append the body to the iframe */
            $(frame_doc)
                .find('head')
                    .append(frame_head)
                    .end()
                .find('body')
                    .append(frame_body)
                    .find('a').click(function(e){
                        e.preventDefault();
                        return false;
                    });
            $.print.frame_num++;
            if(options.preview === false) {
                print_frame.css({width: '0px', height: '0px'});
                print_frame[0].contentWindow.focus();
                print_frame[0].contentWindow.print();
            }
            return this;
        });
    };
    $.print = {
        frame_num: 0, 
        defaults: {
            preview: false, 
            container: false, 
            zIndex: 5000
        }, 
        destroy: function() {
            if($('#print_window').length > 0) {
                $('#print_window').remove();
                $('#print_overlay').remove();
                $(window).unbind('resize.print').unbind('scroll.print');
            }
        }
    };
})(jQuery);

これに対応する CSS は次のようになります (印刷アイコンとキャンセル アイコンの画像パスを変更することを忘れないでください)。

#print_overlay {
    background-color: rgb(176, 176, 176);
    opacity: 0.85;
    position: absolute;
    top: 0px;
    left: 0px;
}

#print_window {
    background: white;
    position: absolute;
    left: 50%;
    margin: 10px 0px 0px -465px; /* Re-center the preview */
    padding: 0px 75px;
    width: 794px;
    height: 100%;
    box-shadow: 0px 0px 20px black;
    -moz-box-shadow: 0px 0px 20px black;
    -webkit-box-shadow: 0px 0px 10px black;
}

#print_content {
    margin: 75px 0px;
    border: 0px;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#print_controls {
    position: fixed;
    top: 37px;
    left: 50%;
    border: 1px solid black;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    margin: 0px 0px 0px -81px;
    padding: 5px 0;
    opacity: 0.75;
}

#print_controls a {
    color: white;
    display: block;
    float: left;
    height: 24px;
    text-decoration: none;
    text-indent: -999em;
    width: 50px;
}

#print_controls a:hover {
    opacity: 0.75;
}

#print_controls a.print {
    background: url(print.png) no-repeat 50% 50%;
}
#print_controls a.cancel {
    background: url(cancel.png) no-repeat 50% 50%;
}

アップデート

次に例を示します。

HTML

<div class="print">
Print
</div>
<div class="print">
Print 2
</div>

Javascript

$(document).ready(function() {
    $('.print').print({container: true, preview: false});
});
于 2012-11-13T21:38:34.777 に答える
1

Kyle の回答は、特定の質問に対する優れた回答です。つまり、各タブを個別に印刷します。

しかし、ページ自体を印刷するとアクティブなタブのみが印刷されるため、これを行いたいと思う場合は、各タブをページ全体の一部として印刷できる答えがあるかもしれません。

トリックは CSS にあります。これを使って：

    @media print {
      .nav-tabs { display: none !important; }
      .tab-content > .tab-pane { display: block !important; }
      .tab-content > .fade { opacity: 1; }
    }

完全な例については、このJSFiddleを参照してください。

于 2016-04-20T11:56:47.740 に答える