Содержимое обрезается по границам страницы при преобразовании HTML в PDF. ⇐ Javascript

[Anonymous]

Я использую React-to-pdf для создания PDF-файлов из моих компонентов React. Основная проблема, с которой я сталкиваюсь, заключается в том, что когда контент достигает конца страницы, он обрезается в середине контента (иногда даже обрезается через текстовые строки) вместо того, чтобы правильно перетекать на следующую страницу.
Текущее поведение

• Текст обрезается пополам по вертикали, когда достигает конца страницы
• Часть текста появляется в внизу одной страницы, а остальная часть продолжается вверху следующей страницы.
• Это происходит даже с простым текстом абзаца.
• Похоже, что сокращение основано исключительно на высоте страницы и не учитывает границы содержимого.

Ожидаемое поведение

• Текст должен перемещаться в конец следующая страница, если недостаточно места.
• Содержимое не должно разбиваться посередине строк/слов.
• По возможности между абзацами должны быть естественные разрывы страниц.

Пример кода

Код: Выделить всё

import { usePDF } from 'react-to-pdf';

const MyComponent = () => {
const { toPDF, targetRef } = usePDF({ filename: "document.pdf" });

return (


Long paragraph of text that might get cut off at the end of a page...
{/* More content */}

 toPDF()}>Download PDF

);
};

Что я пробовал

• Добавление свойств CSS:

  Код: Выделить всё

  @media print {
  p, h1, h2, h3, h4, h5, h6 {
  page-break-inside: avoid;
  break-inside: avoid;
  }
  
  .content {
  page-break-inside: avoid;
  break-inside: avoid;
  }
  }
  

• Использование различных настроек полей
• Обертывание контента в разные элементы контейнера
• Добавление отступов, чтобы контент не располагался слишком близко к границам страницы

Ни одно из этих решений не предотвратило обрезание контента посередине.
Окружающая среда

• React: 18.3.1
• react-to-pdf: ^2.0.0
• Браузер: последняя версия Chrome
• ОС: Windows 10

Вопрос
Есть ли способ предотвратить обрезание содержимого в середине текста при преобразовании в PDF с помощью React-to-pdf? Как я могу обеспечить правильные разрывы страниц с соблюдением границ контента?
Я открыт для:

• Параметры конфигурации, которые я мог пропустить
• Решения CSS, которые работают специально с React-to-pdf
• Альтернативные подходы к обработке разрывов страниц
• Даже альтернативные библиотеки если React-to-pdf не может справиться с этим должным образом

Подробнее здесь: https://stackoverflow.com/questions/797 ... tml-to-pdf