Вы получили отчёт на 40 страниц, и вам нужны восемь диаграмм из него для презентации, или вы хотите вытащить фотографии товаров из каталога поставщика. Загвоздка в том, что PDF хранит изображения во внутреннем потоковом формате, который встроенные API браузера прочитать не могут, поэтому пути «щёлкнуть правой кнопкой мыши и сохранить изображение» не существует.
Spire.PDF for JavaScript читает эти потоки за вас с помощью своего класса PdfImageHelper. GetImagesInfo извлекает каждый объект изображения на странице, а метод Image.Save каждого из них записывает его в отдельный файл. Всё выполняется в браузере через WebAssembly — PDF никогда не покидает устройство, и никакой сервер или внешний инструмент не задействуется.
В этой статье вы узнаете, как:
- Извлекать объекты изображений со страницы PDF с помощью
GetImagesInfo - Сохранять каждое из них в VFS и запускать скачивание
- Пройти по каждой странице многостраничного документа
- Применить единообразную схему именования к извлечённым файлам
- Использовать извлечённые изображения напрямую в вашем интерфейсе React
Предварительные требования
Это руководство предполагает, что у вас есть проект React с установленным Spire.PDF for JavaScript и инициализированным модулем WASM. Инструкции по настройке см. в разделе Интеграция Spire.PDF for JavaScript в проект React.
Вам потребуется:
- PDF-файл, содержащий изображения, загруженный в VFS
- Модуль WASM, доступный через
window.wasmModule.spirepdf
Извлечение изображений с одной страницы
Базовый процесс извлечения получает все изображения с одной страницы, сохраняет каждое в VFS и запускает скачивание:
-
Загрузите PDF в VFS и откройте его с помощью
PdfDocument - Получите целевую страницу из документа
-
Вызовите
GetImagesInfo, чтобы получить массив объектов с информацией об изображениях -
Пройдите в цикле по массиву, вызывая
images[i].Image.Save(), чтобы записать каждое изображение в VFS - Прочитайте из VFS и запустите скачивание браузером для каждого извлечённого изображения
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;
Файлы изображений, извлечённые из PDF
Что делает код:
-
helper.GetImagesInfo(page)возвращает массив объектов с информацией об изображениях для указанной страницы. Каждый объект имеет свойствоImage, предоставляющее доступ к данным изображения. -
images[i].Image.Save({ fileName: outputFileName })записывает изображение в VFS как PNG-файл. - Шаблон «чтение из VFS + Blob + скачивание» тот же, что используется для вывода PDF, но с
type: 'image/png'вместоtype: 'application/pdf'. - Извлечение — это операция только для чтения: исходный PDF-документ не изменяется. Если вы хотите изменить или удалить изображение на месте, а не просто прочитать его, см. Замена и удаление изображений из PDF на JavaScript (React).
Извлечение изображений со всех страниц
Приведённый выше пример извлекает изображения только с первой страницы. Для многостраничного документа, такого как каталог товаров или годовой отчёт, обычно нужны все изображения с каждой страницы. Просто добавьте внешний цикл по страницам документа:
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();
};
Ключевое отличие от примера с одной страницей: внешний цикл for перебирает doc.Pages.Count, а имя файла включает как номер страницы, так и индекс изображения (Page1_Image1.png, Page1_Image2.png, Page2_Image1.png и т. д.), чтобы извлечённые файлы оставались упорядоченными.
Именование извлечённых файлов
Единообразная стратегия именования помогает отслеживать, какое изображение с какой страницы и позиции было получено. Вот распространённые шаблоны:
Последовательная нумерация — самый простой вариант, подходит для извлечения с одной страницы:
const outputFileName = `ExtractedImage_${i + 1}.png`;
// ExtractedImage_1.png, ExtractedImage_2.png, ...
Страница и индекс — лучше всего подходит для многостраничного извлечения, сохраняет исходное расположение:
const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
// Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, ...
С отметкой времени — полезно при извлечении из нескольких документов в рамках одной сессии:
const timestamp = Date.now();
const outputFileName = `Extracted_${timestamp}_Page${pageIndex + 1}_${i + 1}.png`;
На основе имени исходного документа — помогает отследить происхождение:
const sourceName = 'Business_Data_Overview';
const outputFileName = `${sourceName}_p${pageIndex + 1}_img${i + 1}.png`;
// Business_Data_Overview_p1_img1.png, ...
Работа с извлечёнными изображениями
Вместо запуска скачиваний (или в дополнение к ним) вы можете использовать извлечённые данные изображений напрямую в вашем приложении React. Например, отобразить извлечённые изображения в галерее:
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`);
};
Этот подход даёт вам объектные URL-адреса, которые можно использовать напрямую в элементах <img src={url} />, что упрощает создание галереи предпросмотра, позволяет пользователям выбирать конкретные изображения или передавать изображения в другие части вашего приложения. Получив данные изображений, логику отрисовки для их добавления в PDF можно считать естественным следующим шагом.
Примечание. Не забудьте вызвать
URL.revokeObjectURL(url)для каждого объектного URL-адреса, когда он вам больше не нужен, чтобы освободить память. Если вы отображаете изображения в галерее, отзывайте URL-адреса при размонтировании компонента галереи.
Часто задаваемые вопросы (FAQ)
Изменяет ли извлечение изображений исходный PDF?
Нет. Извлечение изображений — операция только для чтения. GetImagesInfo читает данные изображения из PDF, не изменяя документ, а Image.Save записывает копию в VFS. Исходный PDF остаётся неизменным.
В каком формате сохраняются извлечённые изображения?
Примеры в этой статье сохраняют извлечённые изображения как PNG-файлы (.png). Формат выходного файла определяется расширением, которое вы передаёте в Image.Save, поэтому при необходимости вы можете выбрать другой.
Как извлечь изображения из определённого диапазона страниц?
Вместо перебора всех страниц с помощью doc.Pages.Count перебирайте нужный вам диапазон. Например, чтобы извлечь изображения со страниц с 3 по 5 (с нумерацией от 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
}
Могу ли я извлечь изображения и отобразить их в приложении React без скачивания?
Да. Вместо создания ссылки для скачивания создайте объектный URL с помощью URL.createObjectURL(blob) и используйте его как src элемента <img>. Пример кода см. в разделе Работа с извлечёнными изображениями выше.
Что делать, если на странице нет изображений?
GetImagesInfo возвращает пустой массив для страниц без изображений. Цикл for просто не выполняется, поэтому файлы не создаются и ошибки не возникают. Это безопасно выполнять на любой странице.