Eine PDF ist selten einfach nur „zu groß“. Sie ist zu groß für eine bestimmte Tür – ein Limit für E-Mail-Anhänge, ein Upload-Formular, ein Speicherkontingent – und was auch immer sie über diese Grenze gedrückt hat, ist meist eines von drei Dingen. Zu komprimieren, ohne zu wissen, welches, bedeutet raten, und Raten kostet entweder Qualität oder einen weiteren fehlgeschlagenen Upload.
Spire.PDF for JavaScript bietet Ihnen einen Kompressor mit einer Option für jede dieser drei Stellen. Sie können separat oder zusammen angewendet werden, und die Kompromisse sind unterschiedlich genug, dass es sich lohnt, jeden zu verstehen, bevor Sie sich entscheiden. Alles läuft im Browser auf WebAssembly, wobei Dateien durch ein virtuelles Dateisystem (VFS) wandern, sodass ein Dokument nicht auf einen Drittanbieterdienst hochgeladen werden muss, um verkleinert zu werden.
Zur Projekteinrichtung siehe Integrieren von Spire.PDF for JavaScript in ein React-Projekt. Die folgenden Beispiele gehen davon aus, dass das Paket installiert und das WebAssembly-Modul initialisiert wurde.
Was eine PDF eigentlich groß macht
Die Dateigröße einer PDF stammt aus drei verschiedenen Quellen, und sie verhalten sich völlig unterschiedlich:
| Wo das Gewicht liegt | Wie es aussieht | Ein Hinweis darauf, dass es die Ursache ist |
|---|---|---|
| Bilder | Als Bitmaps mit eigener Auflösung eingebettet – Scans, Fotos, exportierte Screenshots | Wenige Seiten, zig Megabyte |
| Eingebettete Schriftarten | Schriftprogramme, die in der Datei gespeichert sind, damit Text überall identisch dargestellt wird | Überwiegend Text, trotzdem mehrere Megabyte |
| Inhaltsströme | Die Zeichenanweisungen hinter Text und Vektorgrafiken | Die Datei wurde von mehreren verschiedenen Tools bearbeitet oder neu gespeichert |
Zwei Dokumente gleicher Länge können sich dadurch um eine Größenordnung unterscheiden: Ein fünfseitiger gescannter Vertrag kann 20 MB wiegen, während ein fünfzigseitiger Textbericht unter 1 MB bleibt. Deshalb gibt es auf die Frage „Wie stark kann ich das komprimieren?“ keine pauschale Antwort – eine stark gescannte Datei hat viel zurückzugeben, und ein Dokument, das bereits überwiegend aus Text und Vektorgrafik besteht, ist nahe an seiner Untergrenze.
Die Diagnose kommt also zuerst. Ein textlastiges Dokument mit Bildeinstellungen zu komprimieren, bringt fast nichts, und Bilder in einem Dokument zu quetschen, dessen Gewicht tatsächlich in den Schriftarten liegt, verschwendet Qualität ohne Gewinn.
Die drei Kompressionshebel
PdfCompressor legt seine Strategie über Options offen, und jede Einstellungsgruppe entspricht einer der drei oben genannten Quellen:
| Option | Worauf sie abzielt | Was Sie aufgeben |
|---|---|---|
ImageCompressionOptions |
Die Bitmaps auf der Seite | Bildtreue – dies ist der einzige verlustbehaftete Hebel der drei |
TextCompressionOptions |
Die eingebetteten Schriftdaten | Nichts, es sei denn, Sie heben die Einbettung der Schriftarten auf; dann die Portabilität |
CompressContents |
Die Seiteninhaltsströme | Praktisch nichts – der Inhalt wird neu kodiert, nicht verworfen |
Die nächsten drei Abschnitte behandeln sie einzeln, damit die Wirkung jedes Hebels für sich sichtbar wird. Der darauffolgende Abschnitt kombiniert sie, was Sie in der Produktion normalerweise wollen.
Bilder komprimieren
Hochauflösende Bitmaps sind die häufigste einzelne Ursache für eine übergroße PDF, und dort sind auch die größten Einsparungen möglich. Options.ImageCompressionOptions steuert Skalierung und Neukodierung über drei Eigenschaften:
| Eigenschaft | Was sie bewirkt | Wann es sich lohnt, sie festzulegen |
|---|---|---|
ResizeImages |
Skaliert Bilder proportional herunter und kodiert sie anschließend neu | Fotos oder Scans, die weit über der Auflösung aufgenommen wurden, in der sie angezeigt werden |
CompressImage |
Wendet verlustbehaftete Neukodierung auf die Bilder an | Immer wenn bei der Bildqualität noch Spielraum besteht |
ImageQuality |
Wählt die Qualitätsstufe für diese Neukodierung | Der letzte Regler – High behält mehr Details, Low erzeugt eine kleinere Datei |
// Compress images in the document: resize, re-compress, and lower the quality
compressor.Options.ImageCompressionOptions.ResizeImages = true;
compressor.Options.ImageCompressionOptions.CompressImage = true;
compressor.Options.ImageCompressionOptions.ImageQuality = pdfModule.ImageQuality.Low;
ImageQuality bewirkt für sich genommen nichts – es beschreibt nur, wie Bilder kodiert werden, die die ersten beiden Eigenschaften durchlaufen; allein gesetzt erhalten Sie also dieselbe Datei zurück. Und da dies der einzige verlustbehaftete Hebel ist, testen Sie zuerst mit der Stufe High, wenn die PDF gedruckt statt am Bildschirm gelesen wird.
Schriftarten: komprimieren oder Einbettung aufheben
Damit Text auf Rechnern, die die ursprünglichen Schriftarten nicht besitzen, identisch dargestellt wird, führt eine PDF die in ihrem Text verwendeten Schriftprogramme in der Datei mit. Sie mögen als Teilmenge vorliegen, fehlen tun sie nicht – und mehrere Familien in mehreren Schnitten summieren sich. Options.TextCompressionOptions bietet zwei sehr unterschiedliche Wege, damit umzugehen:
| Eigenschaft | Was sie bewirkt | Der Haken |
|---|---|---|
CompressFonts |
Komprimiert die eingebetteten Schriftdaten und lässt die Schriftarten an Ort und Stelle | Keiner für die Darstellung – die Glyphen bleiben in der Datei |
UnembedFonts |
Entfernt die Schriftprogramme und lässt den Reader Systemschriftarten einsetzen | Glyphentausch oder Verschiebungen der Abstände überall dort, wo diese Schriftarten fehlen |
// Compress font data; UnembedFonts goes further and removes the embedded fonts
compressor.Options.TextCompressionOptions.CompressFonts = true;
compressor.Options.TextCompressionOptions.UnembedFonts = true;
Die obige Kombination ist die aggressive Variante und nur unter genau einer Bedingung sicher: dass Sie wissen, womit das Dokument dargestellt wird. Ein Download-Link oder eine E-Mail an einen unbekannten Empfänger ist nicht diese Bedingung – dort behalten Sie die Schriftarten eingebettet und lassen CompressFonts die Arbeit machen. Heben Sie die Einbettung nur dort auf, wo der Schriftartensatz feststeht, etwa bei einem internen Viewer mit bekannter Konfiguration.
Inhaltsströme neu komprimieren
Der Text und die Vektorzeichenbefehle einer Seite liegen in Inhaltsströmen. Sie werden beim Schreiben der PDF komprimiert, aber ein Dokument, das wiederholt bearbeitet oder zwischen verschiedenen Tools weitergereicht wurde, kann Redundanz darin ansammeln. Options.CompressContents kodiert diese Ströme neu:
// Re-compress the document content streams
compressor.Options.CompressContents = true;
Für sich genommen ist dies der unspektakulärste der drei – erwarten Sie nicht, dass er ein fotoheavy Dokument rettet. Er verdient seinen Platz in textdichten Dokumenten mit komplexem Layout, und er ist der sicherste Hebel, den man eingeschaltet lassen kann, da das Neukodieren eines Stroms nicht ändert, was er zeichnet.
Alle drei in einem Durchgang
Die drei Dimensionen sind nicht drei getrennte Durchläufe. Sie richten einen PdfCompressor auf eine Datei, legen so viele Optionen fest, wie Sie benötigen, und schreiben das Ergebnis einmal mit CompressToFile heraus.
Das folgende Beispiel aktiviert Bildskalierung und Neukomprimierung mit der Stufe High, Schriftkomprimierung mit Aufhebung der Einbettung und Neukomprimierung der Inhaltsströme – bei einem Dokument, das sowohl hochauflösende Bilder als auch Fließtext enthält:
function App() {
const compressPdfDocument = async () => {
// Get the Spire.PDF WASM module
const pdfModule = window.wasmModule?.spirepdf;
// Check that the module is ready
if (!pdfModule) {
alert('Spire.PDF is not ready yet');
return;
}
// Load the PDF to be compressed into the VFS
const inputFileName = 'ImageDocument.pdf';
await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);
// Create a PdfCompressor and point it at the PDF to compress
let compressor = new pdfModule.PdfCompressor({ filePath: inputFileName });
// 1. Image compression: resize and re-compress images, with a higher quality tier
compressor.Options.ImageCompressionOptions.ResizeImages = true;
compressor.Options.ImageCompressionOptions.CompressImage = true;
compressor.Options.ImageCompressionOptions.ImageQuality = pdfModule.ImageQuality.High;
// 2. Font compression: compress font data and remove embedded fonts
compressor.Options.TextCompressionOptions.CompressFonts = true;
compressor.Options.TextCompressionOptions.UnembedFonts = true;
// 3. Content compression: re-compress the document content streams
compressor.Options.CompressContents = true;
// Define the output file name and compress to it
const outputFileName = 'CompressedDocument.pdf';
compressor.CompressToFile(outputFileName);
// 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>Compress PDF Document</h1>
<button onClick={compressPdfDocument}>
Generate
</button>
</div>
);
}
export default App;
PDF-Dokument, komprimiert durch Kombination aller drei Ansätze
Zwei Dinge zur Form dieses Codes. Das Original bleibt unangetastet im VFS – CompressToFile schreibt ein neues Dokument, sodass eine Vorher-Nachher-Wahl möglich ist. Und weil der Kompressor auf den Ressourcen des Dokuments arbeitet und nicht auf gerenderten Seiten, bleibt der Text echter Text: weiterhin auswählbar, weiterhin durchsuchbar. Nur die Bilder werden neu kodiert.
Prüfen, was sich geändert hat
Beide Dateien liegen im VFS, sodass Sie sie vergleichen können, bevor Sie das Ergebnis an den Benutzer übergeben, statt zu raten, ob die Einstellungen etwas bewirkt haben:
// Both the original and the compressed copy are in the VFS
const originalBytes = window.dotnetRuntime.Module.FS.readFile(inputFileName).length;
const compressedBytes = window.dotnetRuntime.Module.FS.readFile(outputFileName).length;
Geben Sie die Differenz als Prozentwert neben dem Download an, statt nur einen bloßen Button anzubieten – das zeigt dem Benutzer sofort, ob die Datei jetzt klein genug für ihren Bestimmungsort ist. Wenn die beiden Zahlen nahezu identisch sind, lag das Gewicht nicht dort, wo Sie komprimiert haben.
Die Einstellungen auf das Dokument abstimmen
| Das Dokument | Aktivieren | Achten Sie auf |
|---|---|---|
| Gescannte Seiten, Fotos, Screenshots |
ResizeImages, CompressImage, ImageQuality auf Bildschirm oder Druck abgestimmt |
Feine Details in einem Scan werden zuerst weicher – prüfen Sie es mit High, bevor Sie es ausliefern |
| Überwiegend Text und Vektorgrafik |
CompressFonts, CompressContents
|
Die Einsparungen sind von Natur aus bescheiden; jagen Sie ihnen nicht mit Bildeinstellungen nach |
| Gemischte Inhalte | Alle drei, mit ImageQuality.High
|
Das sicherste Allzweckprofil und normalerweise der beste Ausgangspunkt |
| Bereits für die Verteilung optimiert | Nur CompressContents
|
Wenig zu gewinnen; aggressive Bildneukodierung kann Qualität für fast nichts kosten |
Häufige Probleme
Die Datei wurde kaum kleiner, und die PDF hat fast keine Bilder.
Die Größe kommt von den Schriftarten oder den Inhaltsströmen. Aktivieren Sie TextCompressionOptions – mit UnembedFonts nur, wenn die Anzeigeumgebung bekannt ist – und fügen Sie CompressContents hinzu. Textdichte Dokumente reagieren auf diese beiden und auf nichts anderes.
Der Text wird nach dem Komprimieren anders dargestellt.
Das ist UnembedFonts, das genau das tut, was sein Name sagt. Setzen Sie es wieder auf false und behalten Sie CompressFonts = true; die Schriftdaten werden weiterhin komprimiert, aber die Glyphen bleiben in der Datei.
Bilder wirken in der Ausgabe weich oder blockig.
Entweder ist die ImageQuality-Stufe zu niedrig, oder ResizeImages hat ein Bild herunterskaliert, das seine Auflösung für den Druck benötigte. Beginnen Sie bei allem, was gedruckt werden soll, mit High.
Die komprimierte Datei ist genauso groß wie das Original. Manche Dokumente sind bereits optimiert und haben nichts Nennenswertes mehr herzugeben. Verifizieren Sie dies mit dem obigen Byte-Vergleich, statt anzunehmen, dass die Einstellungen fehlgeschlagen sind.
Beim ersten Klick passiert nichts.
Das WebAssembly-Modul lädt asynchron. Dafür ist die Prüfung if (!pdfModule) return; da – deaktivieren Sie in einer echten Anwendung den Button, bis das Modul Bereitschaft meldet, statt einen Alert anzuzeigen.
FAQ
Nach welchem Hebel sollte ich zuerst greifen?
Bilder, vorausgesetzt, sie sind der Übeltäter – aber bestätigen Sie es. Wenn das Dokument textlastig und im Verhältnis zu seiner Seitenzahl unverhältnismäßig groß ist, beginnen Sie mit Schriftarten und Inhaltsströmen und lassen Sie die Bildeinstellungen in Ruhe.
Macht das Komprimieren einer PDF ihren Text unlesbar oder nicht auswählbar?
Nein, und hier unterscheidet sich ein API-basierter Kompressor von Online-Tools, die jede Seite in ein JPEG rastern. Der Text bleibt Text, die Vektorgrafik bleibt Vektorgrafik, und nur die Bitmaps werden angefasst – die komprimierte Kopie ist also weiterhin auswählbar, durchsuchbar und druckbar.
Kann ich nur einen Teil eines Dokuments komprimieren?
Der Kompressor arbeitet mit dem Dokument als Ganzem. Wenn Sie einen Teil einer Datei verkleinert und einen Teil unangetastet lassen möchten, teilen Sie das Dokument zuerst auf, komprimieren Sie den Teil, der es braucht, und führen Sie es wieder zusammen.
Kann ich das Original behalten und die komprimierte Kopie als Auswahl anbieten?
Ja. CompressToFile schreibt in einen neuen Dateinamen und lässt die Eingabe im VFS, sodass beide Versionen in derselben Sitzung verfügbar sind – nützlich, wenn der Benutzer entscheidet, wie viel Qualität er eintauschen möchte.
Braucht dies einen Server, oder kann es vollständig im Browser ausgeführt werden?
Vollständig. Die PDF-Engine ist zu WebAssembly kompiliert und Dateien bewegen sich durch das VFS, sodass das Dokument das Gerät nie verlässt. Das ist gerade für die Dokumente wichtig, die Leute normalerweise verkleinern wollen – Verträge, Abrechnungen, Aufzeichnungen.