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/

展开Bootstrap nav-tabs进行打印

2 个答案: