Как распечатать все вкладки для страниц, созданных 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>

Если вы хотите, чтобы заголовок панелей отображался прямо перед каждой панелью, вы можете попробовать следующий скрипт, который я написал:

<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