Beim Konvertieren von HTML in PDF wird der Inhalt an den Seitengrenzen abgeschnitten ⇐ CSS

[Anonymous]

Ich verwende „react-to-pdf“, um PDFs aus meinen React-Komponenten zu generieren. Das Hauptproblem, mit dem ich konfrontiert bin, besteht darin, dass der Inhalt, wenn er das Ende einer Seite erreicht, mitten im Inhalt abgeschnitten wird (manchmal sogar durch Textzeilen hindurch), anstatt richtig zur nächsten Seite zu fließen.
Aktuelles Verhalten

• Text wird vertikal halbiert, wenn er das Ende einer Seite erreicht
• Ein Teil des Textes wird angezeigt am unteren Rand einer Seite, und der Rest setzt sich am oberen Rand der nächsten Seite fort
• Dies passiert sogar bei einfachem Absatztext
• Der Schnitt scheint ausschließlich auf der Seitenhöhe zu basieren und die Inhaltsgrenzen nicht zu berücksichtigen

Erwartetes Verhalten

• Der Text sollte in die verschoben werden nächste Seite, wenn nicht genügend Platz vorhanden ist
• Inhalte sollten nicht in der Mitte von Zeilen/Wörtern geteilt werden
• Wenn möglich sollten natürliche Seitenumbrüche zwischen den Absätzen erfolgen

Codebeispiel

Code: Select all

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

);
};

Was ich versucht habe

• Hinzufügen von CSS-Eigenschaften:

  Code: Select all

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

  />Keine dieser Lösungen verhinderte, dass der Inhalt in der Mitte der Zeile abgeschnitten wurde.
  Umgebung
  • React: 18.3.1
  • react-to-pdf: ^2.0.0
  • Browser: Neueste Chrome
  • Betriebssystem: Windows 10
  Frage
  Gibt es eine Möglichkeit zu verhindern, dass „react-to-pdf“ beim Konvertieren in PDF Inhalte mitten im Text ausschneidet? Wie kann ich korrekte Seitenumbrüche sicherstellen, die Inhaltsgrenzen respektieren?
  Ich bin offen für:
• Konfigurationsoptionen, die ich möglicherweise übersehen habe
• CSS-Lösungen, die speziell mit React-to-PDF funktionieren
• Alternative Ansätze zum Umgang mit Seitenumbrüchen
• Sogar alternative Bibliotheken wenn „react-to-pdf“ damit nicht richtig umgehen kann