Question

我想打印出启用.tabset的页面。

例如：

# **Tables** {.tabset .tabset-fade .tabset-pills}

## Table 1

a table here

## Table 2

another table here

但是，它只会打印出活动标签。

我尝试过这样的事情：

@media print {
    .tabs {
        display: block;
    }
}

但这不起作用。

Answer 1

尝试以下CSS：

<style>
@media print {
    .tab-pane {
        display: block !important;
        opacity: 1;
    }
}
</style>

如果希望窗格的标题显示在每个窗格的正前方，可以尝试以下我写的脚本：

<style>
@media print {
  .tab-pane {
    display: block !important;
    opacity: 1;
  }
  /* do not show tabset navigation */
  ul.nav {
    display: none !important;
  }
  /* show headers when printing */
  .printhead {
    display: block !important;
    opacity 1 !important;
  }
}

/* dont show the headers on screens */
@media screen { 
  .printhead {
    display: none;
    opacity: 0;
  }
}
</style>

<script>
$(document).ready(function() {
  var $tabsets = $("div.tabset");  // get all tabsets
  $tabsets.each(function() {       // for each tabset...
    var tabNames = $(this).find("ul.nav-pills > li")  // get all the tab-pane titles...
                          .map(function() {
                            return $.trim($(this).text());
                          }).get();
    $(this).find(".tab-content > .tab-pane").each(function(key, value) { // and for each tab-pane, prepend the corresponding title
      $(this).prepend("<h2 class=\"printhead\">" + tabNames[key] + "</h2>");
    });
  });
});
</script>

由于我仅使用您的小示例和Chrome浏览器进行了尝试，因此可能需要进行一些改进，但这可能足以满足您的目的。结果看起来像这样：

可复制的示例：

---
title: "Untitled"
output:
  html_document: default
---

<style>
@media print {
  .tab-pane {
    display: block !important;
    opacity: 1;
  }
  ul.nav {
    display: none !important;
  }
  .printhead {
    display: block !important;
    opacity 1 !important;
  }
}

@media screen {
  .printhead {
    display: none;
    opacity: 0;
  }
}
</style>

<script>
$(document).ready(function() {
  var $tabsets = $("div.tabset");
  $tabsets.each(function() {
    var tabNames = $(this).find("ul.nav-pills > li")
                          .map(function() {
                            return $.trim($(this).text());
                          }).get();
    $(this).find(".tab-content > .tab-pane").each(function(key, value) {
      $(this).prepend("<h2 class=\"printhead\">" + tabNames[key] + "</h2>");
    });
  });
});
</script>

# **Tables** {.tabset .tabset-fade .tabset-pills}

## Table 1

a table here

## Table 2

another table here

如何打印出rmarkdown生成的页面的所有标签？

1 个答案: