PDFs enthalten oft mehr Leerraum als nötig – gescannte Dokumente mit dicken Rändern, technische Zeichnungen mit großzügigen Rändern oder Rechnungen, bei denen nur die mittlere Tabelle von Bedeutung ist. Das Zuschneiden der Seite ist die naheliegende Lösung, aber in einem browserbasierten Workflow ist das nicht ohne Weiteres umsetzbar. Desktop-Tools beeinträchtigen das Web-Erlebnis, und das Senden der Datei an einen Backend-Server wirft Datenschutz- und Compliance-Bedenken auf.
Hier kommt Spire.PDF for JavaScript ins Spiel. Es läuft auf WebAssembly und arbeitet vollständig im Browser, wobei PDFs über ein virtuelles Dateisystem (VFS) geladen und gespeichert werden – ohne Server-Roundtrip. Sie können den sichtbaren Bereich jeder Seite programmatisch festlegen und den Benutzer das zugeschnittene Ergebnis herunterladen lassen – alles clientseitig. Hinweise zur Installation und Projekteinrichtung finden Sie unter Spire.PDF for JavaScript in ein React-Projekt integrieren. Die folgenden Beispiele setzen voraus, dass Spire.PDF installiert und das WebAssembly-Modul initialisiert ist.
CropBox und MediaBox: Zwei Seitenboxen erklärt
Jede PDF-Seite wird durch zwei Rechtecke definiert, und das Verständnis des Unterschieds zwischen ihnen ist unerlässlich, bevor Sie mit dem Zuschneiden beginnen.
MediaBox beschreibt die physischen Abmessungen der Seite – sozusagen das vollständige Blatt Papier. Sie ist die äußerste Begrenzung und definiert den Koordinatenraum, in dem alle Inhalte platziert werden. Eine Standard-A4-Seite hat eine MediaBox von etwa 595 × 842 Punkten.
CropBox definiert, was der Betrachter tatsächlich anzeigt. Sie ist ein Teilbereich der MediaBox, und alle Inhalte, die außerhalb der CropBox liegen, werden vor der Ansicht verborgen. Standardmäßig entspricht die CropBox der MediaBox, weshalb Sie normalerweise die gesamte Seite sehen. Wenn Sie die CropBox verkleinern, teilen Sie dem PDF-Reader im Grunde mit: "Zeigen Sie nur diesen Teil der Seite an."
Die zentrale Erkenntnis beim Zuschneiden ist, dass die CropBox von der MediaBox abgeleitet wird. Sie lesen die vollständigen Seitenabmessungen aus page.MediaBox.Width und page.MediaBox.Height, berechnen dann ein kleineres Rechteck – um den gewünschten Rand auf jeder Seite eingerückt – und weisen es page.CropBox zu. Die x- und y-Koordinaten der CropBox werden von der oberen linken Ecke der Seite aus gemessen, und width und height bestimmen, wie viel von der Seite beibehalten wird.
Alle Seiten mit einem einheitlichen Rand zuschneiden
Das häufigste Szenario ist, auf jede Seite eines Dokuments dieselbe Randreduzierung anzuwenden. Sie iterieren über doc.Pages, lesen die MediaBox jeder Seite und legen eine CropBox fest, die auf allen vier Seiten um eine feste Anzahl von Punkten eingerückt ist.
Das folgende Beispiel schneidet 60 Punkte von jedem Rand jeder Seite ab – genug, um einen breiten weißen Rahmen oder einen unerwünschten Rand zu entfernen:
function App() {
const cropPdfPage = async () => {
// Get the Spire.PDF WASM module
const pdfModule = window.wasmModule?.spirepdf;
// Check whether the module is ready
if (!pdfModule) {
alert('Spire.PDF is not ready yet');
return;
}
// Load the PDF file to be cropped into the VFS
const inputFileName = 'ToCrop.pdf';
await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);
// Create a PdfDocument object and load the PDF document
let doc = new pdfModule.PdfDocument();
doc.LoadFromFile(inputFileName);
// Trim 60 points off every side
const margin = 60;
for (let i = 0; i < doc.Pages.Count; i++) {
const page = doc.Pages.get_Item(i);
// MediaBox gives the full extent of the page, from which the crop box is derived
// (x and y are measured from the top-left corner of the page)
const width = page.MediaBox.Width;
const height = page.MediaBox.Height;
page.CropBox = new pdfModule.RectangleF({
x: margin,
y: margin,
width: width - margin * 2,
height: height - margin * 2,
});
}
const outputFileName = 'CropByMargins.pdf';
doc.SaveToFile(outputFileName);
doc.Close();
// Read the generated file from the VFS and trigger the download
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Crop PDF Pages</h1>
<button onClick={cropPdfPage}>
Crop PDF
</button>
</div>
);
}
export default App;
Beide Seiten werden um einen Rand von 60 Punkten zugeschnitten, sodass der weiße Rand und der Rahmen um die Seite entfernt werden:
Passen Sie den Wert margin an, um zu steuern, wie stark die Seite beschnitten wird. Ein größerer Wert entfernt mehr Leerraum; ein kleinerer Wert führt einen subtileren Beschnitt durch. Da der Rand gleichmäßig auf alle vier Seiten angewendet wird, eignet sich dieser Ansatz am besten, wenn der unerwünschte Rand an jeder Kante ungefähr gleich groß ist – was bei gescannten Dokumenten und exportierten Zeichnungen typischerweise der Fall ist.
Zuschneiden einer einzelnen Seite vs. des gesamten Dokuments
Die Schleife im vorherigen Abschnitt wendet denselben Beschnitt auf jede Seite an. Aber CropBox ist eine Eigenschaft auf Seitenebene – es gibt keine dokumentsweite Zuschnitt-Schnittstelle. Die Schleife stellt lediglich sicher, dass jede Seite denselben Rand erhält. Dieser Unterschied ist wichtig, wenn Ihre Seiten unterschiedliche Anforderungen haben.
Wann das gesamte Dokument zugeschnitten werden sollte: Verwenden Sie den Schleifenansatz, wenn alle Seiten dasselbe Problem aufweisen – zum Beispiel ein gescannter Stapel, bei dem jede Seite denselben Scanner-Rand hat, oder ein mehrseitiges Zeichnungsset, das mit identischen Rändern exportiert wurde. Ein einziger margin-Wert hält den Code einfach und das Ergebnis konsistent.
Wann eine einzelne Seite zugeschnitten werden sollte: Lassen Sie die Schleife weg und weisen Sie die CropBox direkt der Zielseite zu. Das ist nützlich, wenn nur eine Seite beschnitten werden muss – zum Beispiel eine Titelseite mit einem überdimensionierten Logo oder eine Rechnung, bei der nur der Tabellenbereich auf Seite 2 sichtbar sein soll. Sie können auch unterschiedliche Zuschnittwerte auf verschiedene Seiten anwenden, indem Sie seitenspezifische Logik innerhalb der Schleife kombinieren.
So schneiden Sie nur die erste Seite zu und behalten einen 400 × 500 Punkte großen Block, der an Position (80, 80) von der oberen linken Ecke aus beginnt:
// Crop page 1 only: keep a 400 x 500 point block starting at (80, 80) from the top-left corner
const page = doc.Pages.get_Item(0);
page.CropBox = new pdfModule.RectangleF({ x: 80, y: 80, width: 400, height: 500 });
Die Werte x und y geben an, wo der sichtbare Bereich beginnt, gemessen von der oberen linken Ecke der Seite. Die Werte width und height definieren die Größe dieses Bereichs. Alles außerhalb dieses Rechtecks wird vor dem Betrachter verborgen.
Weiches Zuschneiden: Was mit dem Inhalt passiert
Es gibt ein wichtiges Detail zu CropBox, das leicht übersehen wird: Sie führt einen weichen Beschnitt durch, keinen harten.
Wenn Sie die CropBox festlegen, ändern Sie die sichtbare Begrenzung der Seite – das Rechteck, das PDF-Betrachter anzeigen und das Drucker als Seitenbereich verwenden. Aber der Inhalt, der außerhalb dieser Begrenzung liegt, wird nicht aus der Datei entfernt. Er ist weiterhin vorhanden, nur verborgen. Das hat zwei praktische Konsequenzen:
-
Die Dateigröße nimmt nicht ab. Der weggeschnittene Text, die Bilder und Vektorgrafiken verbleiben im PDF-Datenstrom. Wenn Ihr Ziel darin besteht, die Dateigröße durch das Beschneiden von Rändern zu reduzieren, erreichen Sie das durch das alleinige Festlegen der CropBox nicht.
-
Zugeschnittener Inhalt ist weiterhin durchsuchbar. Text außerhalb der sichtbaren CropBox kann weiterhin von Suchfunktionen gefunden und von Benutzern kopiert werden, die wissen, wie sie über den sichtbaren Bereich hinaus markieren. Das ist beim Beschneiden von Rändern normalerweise in Ordnung, bedeutet aber, dass Zuschneiden keine Möglichkeit ist, sensible Informationen zu schwärzen oder sicher zu entfernen.
Wenn Sie Inhalte wirklich entfernen müssen – zur Schwärzung, zur Reduzierung der Dateigröße oder um sicherzustellen, dass verborgener Text nicht wiederhergestellt werden kann –, müssen Sie die Seite neu aufbauen. Der Ansatz besteht darin, ein neues Dokument zu erstellen, den sichtbaren Inhalt mit page.CreateTemplate() aus der zugeschnittenen Seite zu extrahieren, ihn auf eine neue Seite im neuen Dokument zu zeichnen und das Ergebnis zu speichern. Dies erzeugt einen harten Beschnitt, bei dem der außerhalb liegende Inhalt nicht mehr in der Datei vorhanden ist.
Für die meisten Anwendungsfälle zum Beschneiden von Rändern und zum Entfernen von Leerraum ist jedoch das weiche Zuschneiden mit CropBox genau das Richtige: Es ist schnell, einfach und liefert ein optisch sauberes Ergebnis, ohne den Aufwand eines Neuaufbaus des Dokuments.
FAQ
Kann ich eine einzelne Seite anstelle des gesamten Dokuments zuschneiden?
Ja. Da CropBox eine Eigenschaft pro Seite ist, gibt es keine integrierte Methode zum "Zuschneiden des gesamten Dokuments" – die Schleife im Hauptbeispiel ist nur eine Bequemlichkeit, um denselben Rand auf jede Seite anzuwenden. Um nur eine Seite zuzuschneiden, überspringen Sie die Schleife und weisen Sie die CropBox direkt dieser Seite zu:
// Crop page 1 only: keep a 400 x 500 point block starting at (80, 80) from the top-left corner
const page = doc.Pages.get_Item(0);
page.CropBox = new pdfModule.RectangleF({ x: 80, y: 80, width: 400, height: 500 });
Wie mache ich einen Zuschnitt rückgängig?
Das Festlegen von CropBox ändert die Seitenbox direkt, und das Dokument speichert die vorherige Box nicht. Sie könnten erwarten, dass das Zuweisen von page.MediaBox zurück an page.CropBox die ursprüngliche Ansicht wiederherstellt, aber das funktioniert nicht wie beabsichtigt – die Koordinaten werden relativ zum Ursprung des aktuell sichtbaren Bereichs angewendet, sodass sich nur die Abmessungen ändern, während der Ursprung unverändert bleibt. Nach einem Zuschnitt um 60 Punkte beginnt der sichtbare Bereich auch nach dem erneuten Zuweisen der MediaBox-Abmessungen weiterhin bei (60, 60).
Die einfachste Lösung ist, die Originaldatei neu zu laden, wenn Sie sie noch haben. Wenn nur die zugeschnittene Datei verfügbar ist, können Sie den Ursprung mithilfe negativer Offsets zurück in die obere linke Ecke verschieben und die vollständigen Seitenabmessungen wiederherstellen:
// Undo when the crop offset was (offsetX, offsetY)
page.CropBox = new pdfModule.RectangleF({
x: -offsetX,
y: -offsetY,
width: page.MediaBox.Width,
height: page.MediaBox.Height,
});
Die Datei wurde nicht kleiner und der zugeschnittene Inhalt ist weiterhin durchsuchbar – warum?
Dies ist das erwartete Verhalten. CropBox führt einen weichen Beschnitt durch: Sie ändert nur die sichtbare Begrenzung der Seite, während Inhalt außerhalb dieser Begrenzung in der Datei verbleibt und weiterhin durch Textsuche oder Kopiervorgänge gefunden werden kann. Wenn Sie den Inhalt physisch aus dem PDF entfernen müssen, reicht das Festlegen der CropBox nicht aus – Sie müssten die Seite neu aufbauen, indem Sie ein neues Dokument erstellen, den sichtbaren Inhalt mit page.CreateTemplate() extrahieren, ihn auf eine neue Seite zeichnen und in einer neuen Datei speichern.