Question

我正在尝试遍历Twitter Bootstrap中页面上的每个选项卡，并在单击按钮时打印该选项卡的内容。换句话说，如果有5个选项卡，它会遍历所有选项卡并将每个页面发送到打印机。选项卡是在页面加载时动态创建的。

现在我有：

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

但它不适合我。我对查询不是特别强烈（可能很明显） - 任何人都可以提供任何建议吗？我没有在任何地方看到任何类似的代码。

Answer 1

这是一个快速的小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});
});

Answer 2

Kyle的回答是您特定问题的绝佳答案 - 即分别打印每个标签。

但是，如果我可以假设你想这样做，因为打印页面本身只打印活动标签 - 那么我可能有一个答案，允许你打印每个标签作为整个页面的一部分。

诀窍在于CSS。使用此：

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

有关完整示例，请参阅此JSFiddle。

Twitter Bootstrap - 打印所有选项卡

2 个答案: