Vous avez reçu un rapport de 40 pages et vous avez besoin des huit graphiques qu'il contient pour une présentation, ou vous souhaitez extraire des photos de produits du catalogue d'un fournisseur. Le problème : un PDF stocke les images dans un format de flux interne que les API intégrées du navigateur ne peuvent pas lire, il n'existe donc pas de chemin « clic droit, enregistrer l'image ».
Spire.PDF for JavaScript lit ces flux pour vous grâce à sa classe PdfImageHelper. GetImagesInfo récupère chaque objet image d'une page, et la méthode Image.Save de chacun d'eux l'écrit dans un fichier autonome. Tout s'exécute dans le navigateur via WebAssembly — le PDF ne quitte jamais l'appareil et aucun serveur ni outil externe n'est impliqué.
Dans cet article, vous allez apprendre à :
- Récupérer les objets image d'une page PDF avec
GetImagesInfo - Enregistrer chacun d'eux dans le VFS et déclencher un téléchargement
- Parcourir chaque page d'un document de plusieurs pages
- Appliquer un schéma de nommage cohérent aux fichiers extraits
- Utiliser les images extraites directement dans votre interface React
Prérequis
Ce guide suppose que vous disposez d'un projet React avec Spire.PDF for JavaScript installé et le module WASM initialisé. Pour les instructions de configuration, consultez Intégrer Spire.PDF for JavaScript dans un projet React.
Vous aurez besoin de :
- Un PDF contenant des images, chargé dans le VFS
- Le module WASM accessible via
window.wasmModule.spirepdf
Extraire les images d'une page unique
Le flux d'extraction de base récupère toutes les images d'une page, enregistre chacune dans le VFS et déclenche un téléchargement :
-
Charger le PDF dans le VFS et l'ouvrir avec
PdfDocument - Obtenir la page cible du document
-
Appeler
GetImagesInfopour récupérer un tableau d'objets d'informations sur les images -
Parcourir le tableau en appelant
images[i].Image.Save()pour écrire chaque image dans le VFS - Lire depuis le VFS et déclencher un téléchargement du navigateur pour chaque image extraite
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;
Fichiers image extraits du PDF
Ce que fait le code :
-
helper.GetImagesInfo(page)renvoie un tableau d'objets d'informations sur les images pour la page spécifiée. Chaque objet possède une propriétéImagequi donne accès aux données de l'image. -
images[i].Image.Save({ fileName: outputFileName })écrit l'image dans le VFS sous forme de fichier PNG. - Le modèle lecture du VFS + Blob + téléchargement est le même que celui utilisé pour la sortie PDF, mais avec
type: 'image/png'au lieu detype: 'application/pdf'. - L'extraction est une opération en lecture seule — le document PDF d'origine n'est pas modifié. Si vous souhaitez modifier ou supprimer une image sur place plutôt que de simplement la lire, consultez Remplacer et supprimer des images dans des PDF en JavaScript (React).
Extraire les images de toutes les pages
L'exemple ci-dessus n'extrait que de la première page. Pour un document de plusieurs pages comme un catalogue de produits ou un rapport annuel, vous voulez généralement toutes les images de chaque page. Il suffit d'ajouter une boucle externe parcourant les pages du document :
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();
};
Principale différence avec l'exemple d'une seule page : la boucle for externe parcourt doc.Pages.Count, et le nom de fichier inclut à la fois le numéro de page et l'index de l'image (Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, etc.) afin de garder les fichiers extraits organisés.
Nommer les fichiers extraits
Une stratégie de nommage cohérente vous aide à suivre quelle image provient de quelle page et de quelle position. Voici les modèles courants :
Numérotation séquentielle — la plus simple, adaptée à l'extraction d'une seule page :
const outputFileName = `ExtractedImage_${i + 1}.png`;
// ExtractedImage_1.png, ExtractedImage_2.png, ...
Page et index — idéal pour l'extraction multi-pages, préserve l'emplacement source :
const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
// Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, ...
Horodatage — utile lors de l'extraction de plusieurs documents dans une session :
const timestamp = Date.now();
const outputFileName = `Extracted_${timestamp}_Page${pageIndex + 1}_${i + 1}.png`;
Basé sur le nom du document source — aide à suivre l'origine :
const sourceName = 'Business_Data_Overview';
const outputFileName = `${sourceName}_p${pageIndex + 1}_img${i + 1}.png`;
// Business_Data_Overview_p1_img1.png, ...
Travailler avec les images extraites
Au lieu de (ou en plus de) déclencher des téléchargements, vous pouvez utiliser les données d'image extraites directement dans votre application React. Par exemple, affichez les images extraites dans une galerie :
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`);
};
Cette approche vous donne des URL d'objet qui peuvent être utilisées directement dans des éléments <img src={url} />, ce qui facilite la création d'une galerie d'aperçu, permet aux utilisateurs de sélectionner des images spécifiques, ou de transmettre les images à d'autres parties de votre application. Une fois que vous disposez des données d'image, la logique de dessin pour les ajouter à un PDF est une étape suivante naturelle.
Remarque : N'oubliez pas d'appeler
URL.revokeObjectURL(url)pour chaque URL d'objet lorsque vous avez terminé de l'utiliser afin de libérer de la mémoire. Si vous affichez des images dans une galerie, révoquez les URL lorsque le composant de galerie est démonté.
FAQ
L'extraction d'images modifie-t-elle le PDF d'origine ?
Non. L'extraction d'images est une opération en lecture seule. GetImagesInfo lit les données d'image du PDF sans modifier le document, et Image.Save écrit une copie dans le VFS. Le PDF d'origine reste inchangé.
Dans quel format les images extraites sont-elles enregistrées ?
Les exemples de cet article enregistrent les images extraites sous forme de fichiers PNG (.png). L'extension de fichier que vous transmettez à Image.Save détermine le format de sortie ; vous pouvez donc en choisir une autre si votre cas d'usage l'exige.
Comment extraire des images d'une plage de pages spécifique ?
Au lieu de parcourir toutes les pages avec doc.Pages.Count, parcourez la plage souhaitée. Par exemple, pour extraire des pages 3 à 5 (indexées à partir de 0 : 2 à 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
}
Puis-je extraire des images et les afficher dans mon application React sans les télécharger ?
Oui. Au lieu de créer un lien de téléchargement, créez une URL d'objet avec URL.createObjectURL(blob) et utilisez-la comme src d'un élément <img>. Consultez la section Travailler avec les images extraites ci-dessus pour un exemple de code.
Que se passe-t-il si une page ne contient aucune image ?
GetImagesInfo renvoie un tableau vide pour les pages sans images. La boucle for ne s'exécute tout simplement pas, donc aucun fichier n'est généré et aucune erreur n'est levée. Cette opération peut être exécutée sans risque sur n'importe quelle page.