So konvertieren Sie PDF in JavaScript (React) in Graustufen

Wenn Sie einen farbintensiven Bericht an einen monochromen Office-Laserdrucker schicken, zahlen Sie zweimal dafür: einmal für den Toner, den der Drucker verschwendet, um aus CMYK-Punkten Grau vorzutäuschen, und zum anderen mit der Qualität des Ergebnisses – Rasterflächen und Diagrammfüllungen werden zu schlammigem Sprenkelmuster statt zu klaren Tonwerten. Schicken Sie dieselbe Datei an ein Aktenarchiv, ist die Farbe schlimmer als nutzlos. Sonderfarben altern, das Farbmanagement driftet zwischen Maschinen, und jeder Neudruck fällt etwas anders aus als der vorherige. Graustufen sind das Format, das beide Aufgaben tatsächlich brauchen, und es ist nur einen einzigen Aufruf entfernt, sobald die PDF im Code verarbeitet wird.

Dieser Artikel verwandelt eine PDF mit Spire.PDF for JavaScript im Browser in ein Graustufendokument. Die Bibliothek ist nach WebAssembly kompiliert und steuert das Dokument über ein virtuelles Dateisystem (VFS), sodass die Datei auf dem Rechner des Benutzers gelesen und neu geschrieben wird und nichts an einen Konvertierungsdienst weitergegeben wird.

Für die Projekteinrichtung folgen Sie Spire.PDF for JavaScript in ein React-Projekt integrieren. Das folgende Beispiel geht davon aus, dass das Paket installiert ist und das WebAssembly-Modul die Initialisierung abgeschlossen hat.

Warum eine PDF in Graustufen konvertieren (und wann das der falsche Weg ist)

Drei Situationen tauchen immer wieder auf:

• Drucken auf monochromer Hardware. Ein Monolaser hat eine einzige Tonerfarbe. Wenn Sie ihm eine farbige PDF geben, muss er jede Farbe mit einem Halbtonmuster annähern, weshalb farbiger Text und dünne Diagrammlinien unscharf herauskommen. Eine Graustufenvorlage beseitigt das Raten – der Drucker erhält Tonwerte statt Farben, die er erst interpretieren muss.
• Akten und Archivierung. Langzeitarchivierungsstandards sind auf ein festes, geräteunabhängiges Erscheinungsbild ausgelegt. Ein Graustufendokument gibt auf jedem Drucker und jedem Scanner dasselbe wieder, sodass die archivierte Kopie nicht abdriften kann.
• Scan- und Indexierungs-Pipelines. Sobald ein Dokument gescannt und per OCR erfasst wurde, trägt die Farbe keine Information, die der Index nutzen könnte – sie ist nur Ballast.

Es gibt Fälle, die man lieber unangetastet lässt. Wenn Farbe semantische Arbeit leistet – ein Diagramm, in dem jede Reihe einen anderen Farbton hat, ein Marken-Asset, ein Fotoportfolio –, zerstört die Graustufenkonvertierung genau das, was der Leser braucht. Ebenso ist sie das falsche Werkzeug, wenn das eigentliche Problem die Größe ist: Wenn das Ziel eine kleinere Datei statt günstigeres Drucken ist, greift man mit Graustufen nur die Bilder an und ignoriert Schriften und Content-Streams – das ist eine Aufgabe für einen Kompressor.

Was Graustufen tatsächlich verändern

Man nimmt leicht an, dass "Graustufen" bedeutet, die Seite werde als Bild neu gerendert. Dem ist nicht so. Die Konvertierung arbeitet auf Objektebene:

Weil die Bilder neu codiert und nicht in einen Screenshot gerastert werden, ist die Ausgabe eine normale PDF mit einem kleineren Farbraum – kein Bild einer PDF. Dieser Unterschied wird in dem Moment wichtig, in dem jemand versucht, das Ergebnis zu durchsuchen oder eine Textzeile auszuwählen.

Ein Dokument in Graustufen konvertieren

Zwei Member erledigen die Arbeit: Übergeben Sie die Eingabedatei an den Konstruktor von PdfGrayConverter und rufen Sie dann ToGrayPdf mit der Ausgabedatei auf. Der Rest der Komponente ist das übliche Laden in das VFS und Herunterladen als Blob.

function App() {
  const convertToGrayscale = 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 converted into the VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Define the output file name
    const outputFileName = 'GrayscaleDocument.pdf';

    // Construct the grayscale converter from the input file and write out the grayscale document
    const converter = new pdfModule.PdfGrayConverter({ filePath: inputFileName });
    converter.ToGrayPdf({ filePath: outputFileName });
    converter.Dispose();

    // 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>Convert PDF to Grayscale</h1>
      <button onClick={convertToGrayscale}>
        Start Converting
      </button>
    </div>
  );
}

export default App;

Drei Details sind bemerkenswert. ToGrayPdf schreibt eine neue Datei – die Eingabe im VFS bleibt unverändert, sodass eine Option „Farbversion behalten" nichts kostet. Dispose gibt den Konverter frei, sobald die Datei geschrieben ist. Und die Farbbilder auf der Seite sind das, was der Aufruf tatsächlich neu schreibt; der Text wird nie zu einem Bild.

Das Beispieldokument nach der Graustufenkonvertierung, mit den farbigen Diagrammen in Graustufen

Graustufen vs. Entsättigung vs. Schwarz-Weiß

Drei verschiedene Ergebnisse werden im alltäglichen Sprachgebrauch alle "Graustufen" genannt, und sie sind nicht dieselbe Datei:

Auf dem Bildschirm sind die ersten beiden nicht zu unterscheiden; der Unterschied liegt ausschließlich darin, wie viele Bytes jedes Pixel kostet und wie ein Drucker es interpretieren muss. Eine Schwellenwertkonvertierung ist eine völlig andere Operation – sie verwirft die Mitteltöne, sodass Fotografien zu Flecken werden und nur Strichzeichnungen und sauberer Text überleben.

Der Konverter schreibt die erste Art: ein einkanaliges Graustufenbild, weshalb es auch von den dreien am günstigsten zu speichern ist.

Der Nebeneffekt bei der Dateigröße

Graustufen sind keine Komprimierungsfunktion, aber sie verkleinern Dateien, und es lohnt sich zu wissen, warum. Im Beispieldokument waren die Farbbilder dreikanalige PNGs mit insgesamt etwa 66 KB; nach der Konvertierung kamen dieselben Bilder auf etwa 31 KB. Die gesamte Datei schrumpfte von 82 KB auf 44 KB – eine Reduzierung um rund 46 %, die allein durch das Weglassen der Farbkanäle erreicht wurde. Seitenzahl und Text änderten sich überhaupt nicht.

Das gibt es gratis zur Tintenersparnis dazu. Doch lesen Sie die Zahl richtig: Der Gewinn skaliert damit, wie viel der Datei aus Bitmaps besteht. Ein Dokument, das überwiegend aus Text und Vektorgrafik besteht, hat fast keine Bitmaps zum Neucodieren, sodass die Graustufenkonvertierung die Größe kaum bewegt – und wenn die Größe das eigentliche Ziel ist, sind Bilder nur eine von drei Stellen, an denen das Gewicht steckt. Die PDF-Dateigröße in JavaScript (React) reduzieren behandelt die anderen beiden.

Einbindung in eine React-UI

In einer echten Komponente braucht das obige Muster zwei Anpassungen.

Lassen Sie den alert nicht drin. Das WebAssembly-Modul lädt asynchron, sodass der erste Klick eintreffen kann, bevor der Konverter existiert. Deaktivieren Sie die Schaltfläche, bis das Modul Bereitschaft meldet, statt den Benutzer mit einem Dialog zu unterbrechen:

// The module may not have finished loading on the first render
const [ready, setReady] = useState(false);
// ...
<button disabled={!ready} onClick={convertToGrayscale}>Convert to Grayscale</button>

Bündeln Sie denselben Aufruf. Da der Konverter jeweils eine Datei annimmt und jeweils eine Datei schreibt, ist ein Ordner voller Dokumente einfach eine Schleife – derselbe Konstruktor, dieselbe Methode, ein anderer Ausgabename pro Eingabe:

// The converter is a one-file operation, so a batch is a loop
for (const name of inputNames) {
  await window.spire.FetchFileToVFS(name, "", `${process.env.PUBLIC_URL}/data/`);
  const out = name.replace(/\.pdf$/i, '-gray.pdf');
  const converter = new pdfModule.PdfGrayConverter({ filePath: name });
  converter.ToGrayPdf({ filePath: out });
  converter.Dispose();
  // read out from the VFS and download (or report per-file sizes)
}

Da sowohl das Original als auch die Graustufenkopie im VFS liegen, können Sie neben jeder Zeile eine echte Vorher-Nachher-Zahl anzeigen statt eines bloßen Links:

// Both files are in the VFS, so the saving can be measured
const before = window.dotnetRuntime.Module.FS.readFile(name).length;
const after = window.dotnetRuntime.Module.FS.readFile(out).length;

Die Anzeige der eingesparten Prozent macht aus dem Button ein Ergebnis. Wenn die beiden Zahlen fast gleich sind, hatten die Bilder des Dokuments nichts herzugeben – das ist eine Information, kein Fehler.

Häufige Probleme

Die Ausgabe enthält eine zusätzliche Warnzeile. Eine unlizenzierte Build fügt Evaluation Warning : The document was created with Spire.PDF for JavaScript. in das Dokument ein, und sie wird bei jedem Aufruf angehängt – konvertieren Sie dieselbe Datei zweimal in einer Sitzung, erscheint die Zeile zweimal. Eine temporäre Lizenz entfernt sie; wenden Sie sich an den Vertrieb, um einen 30-Tage-Schlüssel zu erhalten, der auch die funktionalen Beschränkungen aufhebt.

Das konvertierte Dokument sieht identisch aus. Prüfen Sie, woraus das Dokument besteht. Wenn es sich um Text und Vektorgrafik ohne Bitmaps handelt, gibt es für einen Graustufendurchlauf sehr wenig zu ändern, und der Unterschied bleibt unsichtbar. Das ist erwartet, kein Fehler.

Beim ersten Klick passiert nichts. Das Modul lud noch. Prüfen Sie im Handler die Modulreferenz, oder halten Sie die Schaltfläche deaktiviert, bis sie bereit ist, wie oben gezeigt.

Die Datei wurde kaum kleiner. Die Graustufenkonvertierung berührt nur die Bilder. Wenn das Gewicht in den Schriften oder den Content-Streams liegt, ist diese Konvertierung nicht der Hebel – siehe den oben verlinkten Komprimierungsartikel.

FAQ

Macht die Konvertierung in Graustufen den Text nicht mehr auswählbar? Nein. Der Text wird nicht gerastert. Nur die Bilder werden neu codiert, sodass das Ergebnis weiterhin durchsuchbar, auswählbar und kopierbar ist – es hat einfach keine Farbe.

Kann ich nur einige Seiten konvertieren? Der Konverter arbeitet mit dem Dokument als Ganzem. Wenn ein Teil einer Datei farbig bleiben soll, teilen Sie das Dokument zuerst auf, konvertieren Sie den Teil, der grau werden soll, und führen Sie die Teile wieder zusammen.

Verringert die Graustufenkonvertierung immer die Dateigröße? Nicht immer, aber meist ein wenig – die Einsparung kommt von den Bildern, je mehr Bitmap vorhanden ist, desto größer der Gewinn. Dokumente, die bereits aus Text und Vektoren bestehen, ändern sich kaum.

Muss ich die Datei irgendwohin hochladen? Nein. Alles geschieht im Browser. Die PDF gelangt in das virtuelle Dateisystem, wird dort neu geschrieben und zum Herunterladen wieder ausgelesen, sodass ein vertrauliches Dokument das Gerät nie verlässt.

Kann ich dem Benutzer beide Versionen anbieten? Ja. ToGrayPdf schreibt in einen neuen Dateinamen und lässt die Eingabe unangetastet, sodass das farbige Original und die Graustufenkopie in derselben Sitzung beide verfügbar sind.

Siehe auch

• PDF für eine schnelle Webansicht in JavaScript (React) linearisieren
• PDF-Dateigröße reduzieren: Bilder, Schriften & Content-Streams in JavaScript (React)
• PDF-Seiten in JavaScript (React) in Bilder konvertieren
• Spire.PDF for JavaScript in ein React-Projekt integrieren
• Produktseite von Spire.PDF for JavaScript