Twitter Bootstrap - 打印所有标签答案

【问题标题】：Twitter Bootstrap - Print All TabsTwitter Bootstrap - 打印所有标签
【发布时间】：2012-11-13 21:26:09
【问题描述】：

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

现在我有：

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

但这对我不起作用。我的查询能力不是特别强（可能很明显） - 任何人都可以提供任何建议吗？我在任何地方都看不到任何可比较的代码。

【问题讨论】：

window.print(); 不能这样工作。您不能为单个页面触发单独的打印作业。考虑使用单独的样式表进行打印，请参阅coding.smashingmagazine.com/2011/11/24/…
我已经在使用打印样式表了……但是标签是动态创建的，并且总是有不同的数字，没有办法（我能想到的）只使用 CSS。

标签： jquery twitter-bootstrap tabs

【解决方案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});
});

【讨论】：

谢谢，凯尔 - 看起来很棒！我会在几天后回来报告......我相信还有其他引导用户也会从中受益。
@johnny_n 请查看我发布的答案更新。我最初发布给您的内容是我所写内容的淡化版本，但我认为您可能对完整插件感兴趣。它允许您简单地打印元素，或者您可以显示打印内容的预览。
谢谢，Kyle -- 会的，感谢您发布完整版！
奇怪的是，我没有看到这与默认打印行为之间有任何大的差异（只有轻微的视觉差异）。它仅打印当前选项卡...插件和 css 都包含在内。我正在使用它来触发$("#idBtnPrint").click(function() { $("#idUlTab").each(function() { $('#idToPrint').print({container: true}); } }); });（idToPrint 是每个选项卡内的主 div。
@johnny_n 你能发布你的 HTML 样本吗？我将发布我正在使用的示例，它似乎工作正常（打开了多个打印对话框）。

【解决方案2】：

Kyle 的回答很好地回答了您的具体问题 - 即单独打印每个标签。

但如果我假设您想要这样做是因为打印页面本身只会打印活动选项卡 - 那么我可能有一个答案，允许您将每个选项卡打印为整个页面的一部分。

诀窍在于 CSS。使用这个：

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

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

【讨论】：