r-markdown - 如何打印出由 rmarkdown 生成的页面的所有选项卡？

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>

如果您希望 Pane 的标题出现在每个 Pane 之前​​，您可以尝试我编写的以下脚本:

<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