Extrair Imagens de um PDF em JavaScript (React)

Recebeu um relatório de 40 páginas e precisa dos oito gráficos que contém para uma apresentação, ou quer extrair fotografias de produtos do catálogo de um fornecedor. O problema: um PDF armazena imagens num formato de fluxo interno que as APIs nativas do navegador não conseguem ler, por isso não existe um caminho de "clique com o botão direito, guardar imagem".

Spire.PDF for JavaScript lê esses fluxos por si através da sua classe PdfImageHelper. GetImagesInfo recupera todos os objetos de imagem de uma página, e o método Image.Save de cada um escreve-os como um ficheiro autónomo. Tudo é executado no navegador através de WebAssembly — o PDF nunca sai do dispositivo e não há qualquer servidor ou ferramenta externa envolvida.

Neste artigo vai aprender a:

• Recuperar objetos de imagem de uma página PDF com GetImagesInfo
• Guardar cada um no VFS e acionar uma transferência
• Percorrer todas as páginas de um documento com várias páginas
• Aplicar um esquema de nomenclatura consistente aos ficheiros extraídos
• Utilizar as imagens extraídas diretamente na sua interface React

---

Pré-requisitos

Este guia pressupõe que tem um projeto React com o Spire.PDF for JavaScript instalado e o módulo WASM inicializado. Para instruções de configuração, consulte Integrar o Spire.PDF for JavaScript num projeto React.

Vai precisar de:

• Um PDF que contenha imagens, carregado no VFS
• O módulo WASM acessível através de window.wasmModule.spirepdf

---

Extrair imagens de uma única página

O fluxo de trabalho básico de extração recupera todas as imagens de uma página, guarda cada uma no VFS e aciona uma transferência:

1. Carregue o PDF no VFS e abra-o com PdfDocument
2. Obtenha a página de destino a partir do documento
3. Chame GetImagesInfo para recuperar um array de objetos de informação de imagem
4. Percorra o array, chamando images[i].Image.Save() para escrever cada imagem no VFS
5. Leia do VFS e acione uma transferência do navegador para cada imagem extraída

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;

Ficheiros de imagem extraídos do PDF

O que o código faz:

• helper.GetImagesInfo(page) devolve um array de objetos de informação de imagem para a página especificada. Cada objeto tem uma propriedade Image que dá acesso aos dados da imagem.
• images[i].Image.Save({ fileName: outputFileName }) escreve a imagem no VFS como um ficheiro PNG.
• O padrão de leitura do VFS + Blob + transferência é o mesmo utilizado para a saída de PDF, mas com type: 'image/png' em vez de type: 'application/pdf'.
• A extração é uma operação apenas de leitura — o documento PDF original não é modificado. Se quiser alterar ou remover uma imagem no local em vez de apenas a extrair, consulte Substituir e remover imagens de PDFs em JavaScript (React).

---

Extrair imagens de todas as páginas

O exemplo acima extrai apenas da primeira página. Para um documento com várias páginas, como um catálogo de produtos ou um relatório anual, normalmente quer todas as imagens de todas as páginas. Basta adicionar um ciclo externo pelas páginas do documento:

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();
};

Principal diferença em relação ao exemplo de página única: o ciclo for externo itera através de doc.Pages.Count, e o nome do ficheiro inclui tanto o número da página como o índice da imagem (Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, etc.) para manter os ficheiros extraídos organizados.

---

Nomear os ficheiros extraídos

Uma estratégia de nomenclatura consistente ajuda-o a acompanhar qual imagem veio de que página e posição. Aqui estão padrões comuns:

Numeração sequencial — a mais simples, adequada para extração de uma única página:

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

Página e índice — a melhor para extração de várias páginas, preserva a localização de origem:

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

Com marca temporal — útil ao extrair de vários documentos numa sessão:

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

Baseado no nome do documento de origem — ajuda a acompanhar a origem:

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

---

Trabalhar com as imagens extraídas

Em vez de (ou além de) acionar transferências, pode utilizar os dados das imagens extraídas diretamente na sua aplicação React. Por exemplo, apresente as imagens extraídas numa galeria:

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`);
};

Esta abordagem dá-lhe URLs de objetos que podem ser utilizados diretamente em elementos <img src={url} />, facilitando a criação de uma galeria de pré-visualização, permitindo que os utilizadores selecionem imagens específicas ou passando as imagens para outras partes da sua aplicação. Assim que tiver os dados da imagem, a lógica de desenho para adicioná-la a um PDF é o próximo passo natural.

Nota: Lembre-se de chamar URL.revokeObjectURL(url) para cada URL de objeto quando já não precisar dele, para libertar memória. Se estiver a apresentar imagens numa galeria, revoguw os URLs quando o componente da galeria for desmontado.

---

Perguntas frequentes

A extração de imagens irá modificar o PDF original?

Não. A extração de imagens é uma operação apenas de leitura. GetImagesInfo lê os dados da imagem do PDF sem modificar o documento, e Image.Save escreve uma cópia no VFS. O PDF original permanece inalterado.

Em que formato são guardadas as imagens extraídas?

Os exemplos neste artigo guardam as imagens extraídas como ficheiros PNG (.png). A extensão de ficheiro que passa para Image.Save determina o formato de saída, por isso pode escolher um diferente se o seu caso de uso assim o exigir.

Como posso extrair imagens de um intervalo específico de páginas?

Em vez de percorrer todas as páginas com doc.Pages.Count, percorra o intervalo pretendido. Por exemplo, para extrair das páginas 3 a 5 (indexado a partir de 0: 2 a 4):

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
}

Posso extrair imagens e apresentá-las na minha aplicação React sem as transferir?

Sim. Em vez de criar uma ligação de transferência, crie um URL de objeto com URL.createObjectURL(blob) e utilize-o como src de um elemento <img>. Consulte a secção Trabalhar com as imagens extraídas acima para ver um exemplo de código.

E se uma página não tiver imagens?

GetImagesInfo devolve um array vazio para páginas sem imagens. O ciclo for simplesmente não é executado, por isso não são gerados ficheiros nem lançados erros. É seguro executá-lo em qualquer página.

---

Ver também

• Como adicionar imagens a um PDF em JavaScript (React)
• Substituir e remover imagens de PDFs em JavaScript (React)
• Integrar o Spire.PDF for JavaScript num projeto React
• Página do produto Spire.PDF for JavaScript