Recibió un informe de 40 páginas y necesita los ocho gráficos que contiene para una presentación, o quiere extraer las fotos de productos del catálogo de un proveedor. El problema: un PDF almacena las imágenes en un formato de flujo interno que las API integradas del navegador no pueden leer, por lo que no existe la opción de "clic derecho, guardar imagen".
Spire.PDF for JavaScript lee esos flujos por usted a través de su clase PdfImageHelper. GetImagesInfo recupera todos los objetos de imagen de una página, y el método Image.Save de cada uno la escribe como un archivo independiente. Todo se ejecuta en el navegador mediante WebAssembly: el PDF nunca sale del dispositivo y no interviene ningún servidor ni herramienta externa.
En este artículo aprenderá a:
- Recuperar objetos de imagen de una página PDF con
GetImagesInfo - Guardar cada una en el VFS y desencadenar una descarga
- Recorrer todas las páginas de un documento de varias páginas
- Aplicar un esquema de nombres coherente a los archivos extraídos
- Usar las imágenes extraídas directamente en su interfaz de React
Requisitos previos
Este tutorial supone que tiene un proyecto de React con Spire.PDF for JavaScript instalado y el módulo WASM inicializado. Para obtener instrucciones de configuración, consulte Integrar Spire.PDF for JavaScript en un proyecto de React.
Necesitará:
- Un PDF que contenga imágenes, cargado en el VFS
- El módulo WASM accesible a través de
window.wasmModule.spirepdf
Extraer imágenes de una sola página
El flujo de trabajo básico de extracción recupera todas las imágenes de una página, guarda cada una en el VFS y desencadena una descarga:
-
Cargue el PDF en el VFS y ábralo con
PdfDocument - Obtenga la página de destino del documento
-
Llame a
GetImagesInfopara recuperar una matriz de objetos de información de imagen -
Recorra la matriz, llamando a
images[i].Image.Save()para escribir cada imagen en el VFS - Lea desde el VFS y desencadene una descarga del navegador para cada imagen 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;
Archivos de imagen extraídos del PDF
Qué hace el código:
-
helper.GetImagesInfo(page)devuelve una matriz de objetos de información de imagen para la página especificada. Cada objeto tiene una propiedadImageque proporciona acceso a los datos de la imagen. -
images[i].Image.Save({ fileName: outputFileName })escribe la imagen en el VFS como un archivo PNG. - El patrón de lectura del VFS + Blob + descarga es el mismo que se usa para la salida de PDF, pero con
type: 'image/png'en lugar detype: 'application/pdf'. - La extracción es una operación de solo lectura: el documento PDF original no se modifica. Si desea cambiar o eliminar una imagen in situ en lugar de solo leerla, consulte Reemplazar y eliminar imágenes de PDF en JavaScript (React).
Extraer imágenes de todas las páginas
El ejemplo anterior solo extrae de la primera página. Para un documento de varias páginas, como un catálogo de productos o un informe anual, normalmente querrá todas las imágenes de cada página. Simplemente agregue un bucle externo que recorra las páginas del 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();
};
Diferencia clave con el ejemplo de una sola página: el bucle for externo recorre doc.Pages.Count, y el nombre del archivo incluye tanto el número de página como el índice de la imagen (Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, etc.) para mantener organizados los archivos extraídos.
Nombrar los archivos extraídos
Una estrategia de nombres coherente le ayuda a saber de qué página y posición proviene cada imagen. Estos son los patrones más comunes:
Numeración secuencial: la más sencilla, ideal para la extracción de una sola página:
const outputFileName = `ExtractedImage_${i + 1}.png`;
// ExtractedImage_1.png, ExtractedImage_2.png, ...
Página e índice: la mejor para la extracción de varias páginas, conserva la ubicación de origen:
const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
// Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, ...
Con marca de tiempo: útil cuando se extraen imágenes de varios documentos en una misma sesión:
const timestamp = Date.now();
const outputFileName = `Extracted_${timestamp}_Page${pageIndex + 1}_${i + 1}.png`;
Basado en el nombre del documento de origen: ayuda a rastrear el origen:
const sourceName = 'Business_Data_Overview';
const outputFileName = `${sourceName}_p${pageIndex + 1}_img${i + 1}.png`;
// Business_Data_Overview_p1_img1.png, ...
Trabajar con las imágenes extraídas
En lugar de desencadenar descargas (o además de hacerlo), puede usar los datos de las imágenes extraídas directamente en su aplicación React. Por ejemplo, mostrar las imágenes extraídas en una galería:
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`);
};
Este enfoque le proporciona URL de objeto que se pueden usar directamente en elementos <img src={url} />, lo que facilita crear una galería de vista previa, permitir que los usuarios seleccionen imágenes específicas o pasar las imágenes a otras partes de su aplicación. Una vez que tenga los datos de la imagen, la lógica de dibujo para agregarla a un PDF es el siguiente paso natural.
Nota: Recuerde llamar a
URL.revokeObjectURL(url)para cada URL de objeto cuando termine de usarla, a fin de liberar memoria. Si muestra imágenes en una galería, revoque las URL cuando el componente de la galería se desmonte.
Preguntas frecuentes
¿La extracción de imágenes modifica el PDF original?
No. La extracción de imágenes es una operación de solo lectura. GetImagesInfo lee los datos de la imagen del PDF sin modificar el documento, y Image.Save escribe una copia en el VFS. El PDF original permanece sin cambios.
¿En qué formato se guardan las imágenes extraídas?
Los ejemplos de este artículo guardan las imágenes extraídas como archivos PNG (.png). La extensión de archivo que pase a Image.Save determina el formato de salida, por lo que puede elegir otra diferente si su caso de uso lo requiere.
¿Cómo extraigo imágenes de un rango de páginas específico?
En lugar de recorrer todas las páginas con doc.Pages.Count, recorra el rango que desee. Por ejemplo, para extraer de las páginas 3 a 5 (con índice basado en 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
}
¿Puedo extraer imágenes y mostrarlas en mi aplicación React sin descargarlas?
Sí. En lugar de crear un enlace de descarga, cree una URL de objeto con URL.createObjectURL(blob) y úsela como src de un elemento <img>. Consulte la sección Trabajar con las imágenes extraídas anterior para ver un ejemplo de código.
¿Qué pasa si una página no tiene imágenes?
GetImagesInfo devuelve una matriz vacía para las páginas sin imágenes. El bucle for simplemente no se ejecuta, por lo que no se generan archivos ni se producen errores. Es seguro ejecutarlo en cualquier página.