Вы устали бороться с многостраничными заголовками при создании PDF-файлов с помощью Rotativa Table? Не волнуйтесь, я вас прикрою! В этой статье я познакомлю вас с несколькими методами решения этой проблемы, используя простой и разговорный язык. Итак, приступим!
- Метод 1. Прикрепленный заголовок
Один из способов обработки многостраничных заголовков – сделать их прикрепленными. Это означает, что заголовок останется фиксированным вверху каждой страницы, независимо от содержимого ниже. Вот пример использования CSS:
thead {
position: sticky;
top: 0;
background-color: #f2f2f2;
}
- Метод 2: повтор заголовка на каждой странице.
Другой подход — повторение заголовка на каждой странице. Это гарантирует, что заголовок будет виден в начале каждой страницы. Вот пример использования таблицы Rotativa:
var document = new Rotativa.Table("http://example.com");
document.PageHeader = "header.html";
- Метод 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);
}
- Метод 4: псевдоэлементы CSS
Псевдоэлементы CSS, такие как::beforeи::after, можно использовать для добавления контента до или после элемента. Вы можете использовать эту функцию для создания постоянного заголовка на каждой странице. Вот пример:
thead::before {
content: "Page 1";
display: block;
background-color: #f2f2f2;
}
- Метод 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-файлов станет проще!