PDF für Fast Web View in JavaScript (React) linearisieren

Sie klicken auf einen Link zu einer großen PDF-Datei und erhalten einen leeren Frame. Der Spinner dreht sich, ein paar Megabyte kommen an, und erst dann erscheint Seite eins. Die Datei war in Ordnung, das Netzwerk war in Ordnung – das Dokument wurde einfach in einer Reihenfolge geschrieben, die den Viewer dazu zwingt, auf das Ganze zu warten, bevor er etwas zeichnen kann. Das ist das Problem, das die Linearisierung löst, und es ist eine strukturelle Lösung, keine Größenlösung: dieselben Bytes, so angeordnet, dass die zum Rendern der ersten Seite benötigten Teile am Anfang stehen.

In diesem Artikel wird eine PDF im Browser mit Spire.PDF für JavaScript linearisiert. Die Bibliothek läuft auf WebAssembly und arbeitet über ein virtuelles Dateisystem (VFS) mit dem Dokument, sodass eine Datei auf dem Rechner des Benutzers neu strukturiert werden kann, ohne durch einen entfernten Optimierungsdienst geschickt zu werden.

Einrichtungsanweisungen finden Sie in Spire.PDF für JavaScript in ein React-Projekt integrieren. Das folgende Beispiel geht davon aus, dass das Paket installiert und das WebAssembly-Modul initialisiert wurde.

Was Fast Web View tatsächlich bedeutet

Eine PDF ist ein Container, und ihre Objekte werden in der Reihenfolge gespeichert, in der sie von dem Programm geschrieben wurden, das sie erzeugt hat. Ein Viewer hingegen benötigt einen bestimmten kleinen Satz – den Dokumentkatalog, den Seitenbaum und die Objekte, die Seite eins zugrunde liegen –, bevor er überhaupt etwas zeichnen kann. Wenn diese Objekte zufällig gegen Ende der Datei liegen, hinter einem großen eingebetteten Bild, bleibt dem Viewer nichts anderes übrig, als weiter herunterzuladen, bis er sie erreicht.

Fast Web View ist der verbraucherorientierte Name für eine linearisierte PDF: eine, deren interne Anordnung die Objekte der ersten Seite nach vorne legt, sodass ein Client, der HTTP-Byte-Range-Anfragen unterstützt, nur diese Bytes anfordern, Seite eins sofort rendern und den Rest im Hintergrund abrufen kann. Der Leser sieht Inhalte, während der Download weiterläuft, anstatt auf einen leeren Frame zu starren.

Die praktische Konsequenz ist, dass zwei Dateien mit identischer Größe sich beim Öffnen völlig unterschiedlich anfühlen können. Gleiche Seitenzahl, gleiche Bilder, gleicher Text – unterschiedliche Zeit bis zum ersten Rendern.

Wie die Linearisierung eine Datei neu anordnet

Die Linearisierung schreibt das Layout der Datei neu, ohne ihren Inhalt anzutasten:

• Die Objekte, von denen Seite eins abhängt, werden an den Anfang der Datei verschoben.
• Ein Linearisierungswörterbuch wird nahe dem Anfang geschrieben, damit ein Client das Layout entdecken kann, bevor er das gesamte Dokument gelesen hat.
• Eine Hinweistabelle zeichnet auf, wo die Objekte jeder Seite liegen; dies ermöglicht es einem Reader, mit einer Byte-Range-Anfrage zu einer beliebigen Seite vorzuspringen.
• Die Querverweistabelle wird so platziert, dass sie früh gelesen werden kann und nicht erst am Ende der Datei.

Alles, was ein Leser tatsächlich sieht – Text, Bilder, Schriftarten, Vektorgrafiken, Links, Anmerkungen, Lesezeichen, Metadaten – wird unverändert übernommen. Die Wörter auf der Seite sind dieselben Wörter an denselben Stellen. Was sich geändert hat, ist die Byte-Reihenfolge, nicht der Inhalt. Deshalb ist ein linearisiertes Dokument nicht durch bloßes Ansehen zu erkennen: Öffnen Sie das Original und die Ausgabe nebeneinander, und sie sind nicht zu unterscheiden, weil der Unterschied nur darin besteht, wann die Teile gelesen werden können.

Ein Dokument im Browser linearisieren

Die Verwendung entspricht den anderen Konvertern der Bibliothek: Übergeben Sie die Eingabedatei an PdfToLinearizedPdfConverter und rufen Sie dann ToLinearizedPdf auf, um das neu strukturierte Dokument zu schreiben.

function App() {
  const convertToLinearized = 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 = 'LinearizedDocument.pdf';

    // Construct the linearization converter from the input file and write out the linearized document
    const converter = new pdfModule.PdfToLinearizedPdfConverter({ filePath: inputFileName });
    converter.ToLinearizedPdf({ 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>Linearize a PDF</h1>
      <button onClick={convertToLinearized}>
        Start Converting
      </button>
    </div>
  );
}

export default App;

ToLinearizedPdf schreibt eine neue Datei, sodass die Eingabe im VFS bleibt und das Original zum Vergleich verfügbar ist. Nichts an dem Aufruf hängt vom Inhalt des Dokuments ab – ein Bericht, ein Handbuch und ein gescanntes Archiv durchlaufen alle dieselben zwei Member.

Das linearisierte Dokument sieht auf der Seite nicht anders aus; die Änderung liegt in der Dateistruktur

Linearisieren oder komprimieren

Diese beiden Durchgänge werden häufig verwechselt, weil beide als „Optimieren einer PDF“ beschrieben werden, aber sie beantworten unterschiedliche Fragen.

Eine Datei kann beides benötigen, und die Reihenfolge ist wichtig. Die Komprimierung schreibt das Dokument neu, und jeder Durchgang, der eine PDF neu schreibt, verwirft das linearisierte Layout – wenn Sie also beides möchten, komprimieren Sie zuerst und linearisieren Sie zuletzt, damit die linearisierte Struktur der Endzustand der Datei ist.

Wann sich die Linearisierung lohnt

Die Linearisierung zahlt sich in einer bestimmten Situation aus: ein Dokument, das groß genug ist, dass der Download auffällt, über HTTP an einen Viewer geliefert, der Bereichsanfragen unterstützt.

• Handbücher, Kataloge und lange Berichte, die von einer Website bereitgestellt werden. Dies ist der klassische Fall – zig Megabyte, über einen Link geöffnet, mit Lesern, die direkt zu einem Kapitel springen möchten.
• Mobile Leser mit langsamen Verbindungen. Die erste Seite erscheint aus den ersten angeforderten Bytes, sodass die wahrgenommene Ladezeit sinkt, selbst wenn der Gesamtdownload es nicht tut.
• Dokumente, die Leser üblicherweise in der Mitte aufschlagen. Byte-Range-Anfragen ermöglichen es einem Client, zuerst eine spätere Seite abzurufen, was nur mit der Hinweistabelle möglich ist, die eine linearisierte Datei enthält.

In anderen Fällen lohnt sich der Durchgang nicht. Eine Datei, die von der lokalen Festplatte geöffnet wird, wird nicht über HTTP abgerufen, sodass es keine Bereichsanfrage gibt, die genutzt werden könnte. Ein kurzes Dokument wird bereits gerendert, bevor der Unterschied spürbar wäre. Und ein interner Druckworkflow streamt weder noch springt er – er möchte das gesamte Dokument, in der richtigen Reihenfolge, auf einmal.

Bestätigen, dass die Ausgabe linearisiert ist

Da die sichtbaren Seiten identisch sind, beweist „es sieht richtig aus“ nichts. Die Änderung liegt in der Datei, daher muss die Prüfung die Datei lesen.

Eine linearisierte PDF enthält ein Linearisierungswörterbuch nahe dem Anfang ihrer Bytes, und die Markierung ist Klartext, sodass die ersten paar hundert Bytes der Ausgabe ausreichen, um sie zu bestätigen. Sowohl die Eingabe als auch die Ausgabe befinden sich im VFS, was den Vergleich zu ein paar Dateilesevorgängen macht:

// Read the head of the file and look for the linearization marker
const bytes = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const head = new TextDecoder('latin1').decode(bytes.slice(0, 1024));
const linearized = head.includes('/Linearized');

Das ist eine nützliche Absicherung für eine Pipeline: Konvertieren Sie ein Dokument und prüfen Sie dann, ob die Markierung vorhanden ist, bevor Sie die Datei weitergeben. Wenn sie fehlt, wurde die Datei nach der Linearisierung von etwas Nachgelagertem neu geschrieben – denken Sie daran, dass jedes erneute Speichern, einschließlich eines Komprimierungsdurchgangs, das linearisierte Layout verwirft.

Häufige Probleme

Die erste Seite braucht immer noch Zeit, um zu erscheinen. Prüfen Sie, wie die Datei bereitgestellt wird. Die Linearisierung hilft nur, wenn der Client Teile der Datei anfordern kann – über HTTP mit Bereichsunterstützung bereitgestellt. Wenn die gesamte Datei auf einmal abgerufen wird oder das Dokument kurz ist, kann der Durchgang nicht ändern, was Sie sehen.

Die Ausgabe enthält eine zusätzliche Textzeile. Ein nicht lizenzierter Build hängt Evaluation Warning : The document was created with Spire.PDF for JavaScript. an das Dokument an, einmal pro Konvertierungsaufruf. Eine temporäre 30-Tage-Lizenz entfernt sie zusammen mit den funktionalen Einschränkungen – kontaktieren Sie den Vertrieb, um eine zu erhalten.

Die Dateigröße ist nicht gesunken. Das wird sie normalerweise auch nicht. Die Linearisierung ordnet die vorhandenen Bytes neu an; sie entfernt keine. Wenn die Größe das Problem ist, ist das eine Aufgabe für die Komprimierung, nicht für die Linearisierung.

Beim ersten Klick passiert nichts. Das WebAssembly-Modul lädt asynchron. if (!pdfModule) return; ist die Absicherung im Beispiel; in einer echten UI deaktivieren Sie das Steuerelement, bis das Modul bereit ist, anstatt eine Warnung anzuzeigen.

FAQ

Ändert die Linearisierung einer PDF ihren Inhalt oder ihre Qualität? Nein. Text, Bilder, Schriftarten, Formatierung, Links und Metadaten werden exakt übernommen; nur die interne Byte-Reihenfolge ändert sich. Die Seiten sehen identisch aus und verhalten sich identisch.

Ist die Linearisierung dasselbe wie das Komprimieren einer PDF? Nein. Komprimieren entfernt Redundanz, um weniger Bytes zu erzeugen; Linearisieren ordnet die bereits vorhandenen Bytes neu an, damit die erste Seite früher gelesen werden kann. Das eine zielt auf die Downloadgröße, das andere auf die Zeit bis zum ersten Rendern.

Hilft es, wenn die Datei von der lokalen Festplatte geöffnet wird? Selten. Der Vorteil entsteht durch Streaming über HTTP mit Byte-Range-Anfragen, sodass ein Dokument, das von einem lokalen Pfad geöffnet wird, nichts zu gewinnen hat.

Bleibt eine linearisierte Datei linearisiert? Nur bis etwas sie neu schreibt. Jedes Tool, das das Dokument erneut speichert – ein Komprimierungsdurchgang, eine Bearbeitung, eine Zusammenführung –, verwirft das linearisierte Layout, daher sollte die Linearisierung der letzte Schritt in der Pipeline sein.

Funktioniert es mit einer verschlüsselten oder passwortgeschützten Datei? Verschlüsselung ist ein separates Anliegen vom Layout. Entschlüsseln Sie das Dokument zuerst und lassen Sie den Konverter mit einer bereits lesbaren Datei arbeiten.

Kann ich mehrere Dateien gleichzeitig konvertieren? Ja. Der Konverter ist eine Einzeldatei-Operation, daher ist eine Stapelverarbeitung eine Schleife – dieselben zwei Member, mit einem eigenen Ausgabenamen für jede Eingabe.

Siehe auch

• Wie man PDF in JavaScript (React) in Graustufen konvertiert
• PDF-Dateigröße reduzieren: Bilder, Schriftarten und Inhaltsströme in JavaScript (React)
• Wie man die Seitenzahl einer PDF in JavaScript (React) ermittelt
• Spire.PDF für JavaScript in ein React-Projekt integrieren
• Spire.PDF für JavaScript Produktseite