展开用于打印的 Bootstrap 导航选项卡

Question

当我从浏览器打印页面时，如果可能，我希望能够查看所有选项卡内容。目前，我只看到当前选项卡。

是否可以扩展所有单独的选项卡内容以仅用于打印？

    <ul class="nav nav-tabs" id="tabs">
        <li class="active"><a href="#tabs-1" data-toggle="tab">Property</a></li>
        <li><a href="#tabs-2" data-toggle="tab">Map</a></li>
        <li><a href="#tabs-3" data-toggle="tab">Owner</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tabs-1">
            <dl class="dl-horizontal">
              <dt>
                :
    </div>

Answer 1

添加用于打印的 CSS，具体取决于您隐藏选项卡的方式，将其更改为相反的解决方案是一种可能的解决方案。 例如，这样的“可能”工作：

@media print {
  ul.nav-tabs li {
    display: block;
  }
 }

Answer 2

你可以使用类似的东西：

var beforePrint = function() {
    $(".main-content .nav-tabs").each( function() {
        $(this).find("li a").each( function(index, element) {
            var tab_id = $(this).attr('href');
            var tab_text = $(this).text();
            $('<h2 class="print-title-tab">' + tab_text + "</h2>").insertBefore(tab_id);
        });
    });
};
var afterPrint = function() {
    $('.print-title-tab').remove();
};

if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches) {
            beforePrint();
        } else {
            afterPrint();
        }
    });
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

https://coderwall.com/p/kvx42g/bootstrap-3-tabs-print-friendly

http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/