Bilder aus einer PDF in JavaScript extrahieren (React)

Sie haben einen 40-seitigen Bericht erhalten und benötigen die acht darin enthaltenen Diagramme für eine Präsentation, oder Sie möchten Produktfotos aus einem Lieferantenkatalog herausziehen. Der Haken: Ein PDF speichert Bilder in einem internen Stream-Format, das die integrierten APIs des Browsers nicht lesen können, es gibt also keinen Weg über "Rechtsklick, Bild speichern".

Spire.PDF für JavaScript liest diese Streams für Sie über seine Klasse PdfImageHelper aus. GetImagesInfo ruft jedes Bildobjekt auf einer Seite ab, und die Methode Image.Save jedes Objekts schreibt es als eigenständige Datei heraus. Alles läuft im Browser über WebAssembly — das PDF verlässt niemals das Gerät, und es sind kein Server und kein externes Tool beteiligt.

In diesem Artikel erfahren Sie, wie Sie:

• Bildobjekte aus einer PDF-Seite mit GetImagesInfo abrufen
• Jedes davon im VFS speichern und einen Download auslösen
• Jede Seite in einem mehrseitigen Dokument durchlaufen
• Ein einheitliches Benennungsschema auf die extrahierten Dateien anwenden
• Die extrahierten Bilder direkt in Ihrer React-Oberfläche verwenden

---

Voraussetzungen

Diese Anleitung setzt voraus, dass Sie ein React-Projekt mit installiertem Spire.PDF für JavaScript und initialisiertem WASM-Modul haben. Anweisungen zur Einrichtung finden Sie unter Integrieren von Spire.PDF für JavaScript in ein React-Projekt.

Sie benötigen:

• Ein PDF, das Bilder enthält und in das VFS geladen wird
• Das WASM-Modul, erreichbar über window.wasmModule.spirepdf

---

Bilder aus einer einzelnen Seite extrahieren

Der grundlegende Extraktionsablauf ruft alle Bilder von einer Seite ab, speichert jedes im VFS und löst einen Download aus:

1. Laden Sie das PDF in das VFS und öffnen Sie es mit PdfDocument
2. Holen Sie die Zielseite aus dem Dokument
3. Rufen Sie GetImagesInfo auf, um ein Array von Bildinfo-Objekten abzurufen
4. Durchlaufen Sie das Array und rufen Sie images[i].Image.Save() auf, um jedes Bild in das VFS zu schreiben
5. Lesen Sie aus dem VFS und lösen Sie für jedes extrahierte Bild einen Browser-Download aus

function App() {
  const extractImagesFromPdf = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check if the WASM module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file into VFS
    const inputFileName = 'Business_Data_Overview.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);

    // Get the first page
    let page = doc.Pages.get_Item(0);

    // Create a PdfImageHelper object and get the image information on the first page
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // Iterate through the images on the page, save each as a separate image file, and trigger download
    for (let i = 0; i < images.length; i++) {
      const outputFileName = `ExtractedImage_${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      // Read the extracted image file from VFS and trigger download
      const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const blob = new Blob([fileArray], { type: 'image/png' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      a.click();
      URL.revokeObjectURL(url);
    }

    doc.Close();
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Extract Images From PDF</h1>
      <button onClick={extractImagesFromPdf}>
        Generate
      </button>
    </div>
  );
}

export default App;

Aus dem PDF extrahierte Bilddateien

Was der Code macht:

• helper.GetImagesInfo(page) gibt ein Array von Bildinfo-Objekten für die angegebene Seite zurück. Jedes Objekt verfügt über eine Image-Eigenschaft, die Zugriff auf die Bilddaten bietet.
• images[i].Image.Save({ fileName: outputFileName }) schreibt das Bild als PNG-Datei in das VFS.
• Das Muster aus VFS-Lesen + Blob + Download ist dasselbe wie bei der PDF-Ausgabe, jedoch mit type: 'image/png' statt type: 'application/pdf'.
• Die Extraktion ist ein schreibgeschützter Vorgang — das ursprüngliche PDF-Dokument wird nicht verändert. Wenn Sie ein Bild direkt ersetzen oder entfernen möchten, anstatt es nur auszulesen, lesen Sie Ersetzen und Entfernen von Bildern in PDFs mit JavaScript (React).

---

Bilder aus allen Seiten extrahieren

Das obige Beispiel extrahiert nur aus der ersten Seite. Bei einem mehrseitigen Dokument wie einem Produktkatalog oder Jahresbericht möchten Sie in der Regel alle Bilder von jeder Seite. Fügen Sie einfach eine äußere Schleife über die Seiten des Dokuments hinzu:

const extractAllImages = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let imageCount = 0;

  // Loop through all pages in the document
  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    // Extract each image on this page
    for (let i = 0; i < images.length; i++) {
      imageCount++;
      const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const blob = new Blob([fileArray], { type: 'image/png' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      a.click();
      URL.revokeObjectURL(url);
    }
  }

  console.log(`Total images extracted: ${imageCount}`);
  doc.Close();
};

Wichtigster Unterschied zum Einzelseiten-Beispiel: Die äußere for-Schleife durchläuft doc.Pages.Count, und der Dateiname enthält sowohl die Seitenzahl als auch den Bildindex (Page1_Image1.png, Page1_Image2.png, Page2_Image1.png usw.), um die extrahierten Dateien organisiert zu halten.

---

Benennung extrahierter Dateien

Eine einheitliche Benennungsstrategie hilft Ihnen nachzuvollziehen, welches Bild von welcher Seite und Position stammt. Hier sind gängige Muster:

Fortlaufende Nummerierung — am einfachsten, gut für die Extraktion einzelner Seiten:

const outputFileName = `ExtractedImage_${i + 1}.png`;
// ExtractedImage_1.png, ExtractedImage_2.png, ...

Seite und Index — am besten für die Extraktion mehrerer Seiten, bewahrt die Quellposition:

const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
// Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, ...

Mit Zeitstempel — nützlich bei der Extraktion aus mehreren Dokumenten in einer Sitzung:

const timestamp = Date.now();
const outputFileName = `Extracted_${timestamp}_Page${pageIndex + 1}_${i + 1}.png`;

Basierend auf dem Namen des Quelldokuments — hilft, die Herkunft nachzuvollziehen:

const sourceName = 'Business_Data_Overview';
const outputFileName = `${sourceName}_p${pageIndex + 1}_img${i + 1}.png`;
// Business_Data_Overview_p1_img1.png, ...

---

Arbeiten mit extrahierten Bildern

Anstatt Downloads auszulösen (oder zusätzlich dazu) können Sie die extrahierten Bilddaten direkt in Ihrer React-Anwendung verwenden. Zeigen Sie beispielsweise die extrahierten Bilder in einer Galerie an:

const extractAndDisplay = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let extractedImageUrls = [];

  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    for (let i = 0; i < images.length; i++) {
      const tempName = `temp_p${pageIndex + 1}_${i + 1}.png`;
      images[i].Image.Save({ fileName: tempName });

      const fileArray = window.dotnetRuntime.Module.FS.readFile(tempName);
      const blob = new Blob([fileArray], { type: 'image/png' });
      const url = URL.createObjectURL(blob);
      extractedImageUrls.push(url);
    }
  }

  doc.Close();

  // Now you have an array of object URLs you can use in <img> tags
  // setExtractedImages(extractedImageUrls); // if using state
  console.log(`Extracted ${extractedImageUrls.length} images ready for display`);
};

Dieser Ansatz liefert Ihnen Objekt-URLs, die direkt in <img src={url} />-Elementen verwendet werden können, sodass es einfach ist, eine Vorschaugalerie zu erstellen, Benutzer bestimmte Bilder auswählen zu lassen oder die Bilder an andere Teile Ihrer Anwendung weiterzugeben. Sobald Sie die Bilddaten haben, ist die Zeichenlogik zum Hinzufügen in ein PDF ein natürlicher nächster Schritt.

Hinweis: Denken Sie daran, für jede Objekt-URL URL.revokeObjectURL(url) aufzurufen, wenn Sie sie nicht mehr benötigen, um Speicher freizugeben. Wenn Sie Bilder in einer Galerie anzeigen, widerrufen Sie die URLs, wenn die Galeriekomponente ausgehängt wird.

---

FAQ

Verändert die Extraktion von Bildern das ursprüngliche PDF?

Nein. Die Bildextraktion ist ein schreibgeschützter Vorgang. GetImagesInfo liest die Bilddaten aus dem PDF, ohne das Dokument zu verändern, und Image.Save schreibt eine Kopie in das VFS. Das ursprüngliche PDF bleibt unverändert.

In welchem Format werden extrahierte Bilder gespeichert?

Die Beispiele in diesem Artikel speichern extrahierte Bilder als PNG-Dateien (.png). Die Dateierweiterung, die Sie an Image.Save übergeben, bestimmt das Ausgabeformat, sodass Sie ein anderes wählen können, wenn Ihr Anwendungsfall dies erfordert.

Wie extrahiere ich Bilder aus einem bestimmten Seitenbereich?

Anstatt mit doc.Pages.Count über alle Seiten zu iterieren, durchlaufen Sie Ihren gewünschten Bereich. Um beispielsweise aus den Seiten 3 bis 5 (0-basiert: 2 bis 4) zu extrahieren:

for (let pageIndex = 2; pageIndex <= 4 && pageIndex < doc.Pages.Count; pageIndex++) {
  let page = doc.Pages.get_Item(pageIndex);
  let images = helper.GetImagesInfo(page);
  // ... save and download each image
}

Kann ich Bilder extrahieren und in meiner React-App anzeigen, ohne sie herunterzuladen?

Ja. Anstatt einen Download-Link zu erstellen, erstellen Sie eine Objekt-URL mit URL.createObjectURL(blob) und verwenden Sie sie als src eines <img>-Elements. Ein Codebeispiel finden Sie im obigen Abschnitt Arbeiten mit extrahierten Bildern.

Was ist, wenn eine Seite keine Bilder hat?

GetImagesInfo gibt für Seiten ohne Bilder ein leeres Array zurück. Die for-Schleife wird einfach nicht ausgeführt, sodass keine Dateien erzeugt und keine Fehler ausgelöst werden. Dies kann sicher auf jeder Seite ausgeführt werden.

---

Siehe auch

• Wie man Bilder mit JavaScript (React) zu einem PDF hinzufügt
• Ersetzen und Entfernen von Bildern in PDFs mit JavaScript (React)
• Integrieren von Spire.PDF für JavaScript in ein React-Projekt
• Produktseite von Spire.PDF für JavaScript