Освоение многостраничных заголовков с помощью таблицы Rotativa

Вы устали бороться с многостраничными заголовками при создании PDF-файлов с помощью Rotativa Table? Не волнуйтесь, я вас прикрою! В этой статье я познакомлю вас с несколькими методами решения этой проблемы, используя простой и разговорный язык. Итак, приступим!

  1. Метод 1. Прикрепленный заголовок
    Один из способов обработки многостраничных заголовков – сделать их прикрепленными. Это означает, что заголовок останется фиксированным вверху каждой страницы, независимо от содержимого ниже. Вот пример использования CSS:
thead {
  position: sticky;
  top: 0;
  background-color: #f2f2f2;
}
  1. Метод 2: повтор заголовка на каждой странице.
    Другой подход — повторение заголовка на каждой странице. Это гарантирует, что заголовок будет виден в начале каждой страницы. Вот пример использования таблицы Rotativa:
var document = new Rotativa.Table("http://example.com");
document.PageHeader = "header.html";
  1. Метод 3: пользовательская функция заголовка
    Если вам нужен больший контроль над содержимым заголовка, вы можете использовать пользовательскую функцию для динамического создания заголовка для каждой страницы. Вот пример использования таблицы Rotativa:
public ActionResult GeneratePDF()
{
    // Generate the PDF content
    var pdfContent = GenerateContent();
    // Set up the PDF generation options
    var options = new Rotativa.PartialViewAsPdfOptions
    {
        PageHeaderFunction = "getHeader",
        CustomSwitches = "--header-html header.html",
    };
    // Generate the PDF with custom header function
    return new Rotativa.PartialViewAsPdf("YourView", pdfContent)
    {
        RotativaOptions = options
    };
}
public ActionResult getHeader(int pageNumber, int totalPages)
{
    // Generate and return the header HTML for the given page number and total pages
    string headerHtml = "<div class='header'>Page " + pageNumber + " of " + totalPages + "</div>";
    return Content(headerHtml);
}
  1. Метод 4: псевдоэлементы CSS
    Псевдоэлементы CSS, такие как ::beforeи ::after, можно использовать для добавления контента до или после элемента. Вы можете использовать эту функцию для создания постоянного заголовка на каждой странице. Вот пример:
thead::before {
  content: "Page 1";
  display: block;
  background-color: #f2f2f2;
}
  1. Метод 5: событие прокрутки JavaScript
    Если вы хотите, чтобы заголовок динамически менялся при прокрутке страниц пользователем, вы можете прослушивать событие прокрутки и соответствующим образом обновлять заголовок. Вот пример использования JavaScript:
window.addEventListener("scroll", function() {
  var header = document.querySelector("header");
  if (window.pageYOffset > 0) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
});

Имея в своем распоряжении эти методы, вы теперь можете решить проблему многостраничных заголовков при использовании Rotativa Table. Выберите метод, который лучше всего соответствует вашим требованиям, и создание PDF-файлов станет проще!