PDF в изображения на JavaScript: конвертер в браузере без сервера

Однажды мне понадобилось дать пользователям возможность конвертировать PDF прямо в браузере — без загрузки файлов на сервер. Счета, отсканированные документы, отчёты — всё это можно обработать локально, и JavaScript справляется с этим лучше, чем кажется на первый взгляд

Современные браузеры делают это значительно проще, чем раньше

Использование JavaScript для обработки PDF-файлов в браузере позволяет избежать загрузки документов на сервер, что делает процесс более быстрым и удобным

В этом руководстве вы научитесь создавать браузерный конвертер PDF в изображения с помощью JavaScript, который позволяет загружать файлы и предварительно просматривать их, выбирать форматы (JPG или PNG), настраивать качество и скачивать изображения прямо из браузера без использования бэкенда

Как работает конвертация PDF в изображения

Браузер не может самостоятельно напрямую конвертировать PDF-файлы в изображения

Вместо этого JavaScript-библиотеки рендерят страницы PDF на Canvas (HTML-элемент <canvas>), который затем можно экспортировать как файлы изображений — JPG или PNG

Процесс начинается с загрузки PDF-документа в браузер, после чего JavaScript обрабатывает файл, создаёт визуальные рендеры каждой страницы PDF на canvas, конвертирует их в файлы изображений и предоставляет возможность для скачивания

Таким образом, пользователи могут избегать отправки своих документов на сторонние серверы, что ускоряет процесс и обеспечивает большую защиту данных

Подключение PDF.js и структура проекта

Проект ориентирован на простоту — всё выполняется непосредственно в браузере с помощью JavaScript, что исключает необходимость в сервере

Вам понадобится только:

• HTML-файл
• JavaScript-файл
• библиотека PDF.js

Для рендеринга страниц PDF в браузере используется библиотека Mozilla PDF.js — проверенное решение с открытым исходным кодом, которую можно подключить через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

После загрузки браузер сможет читать и рендерить страницы PDF напрямую с помощью JavaScript

Создание интерфейса загрузки

Начните с простой области загрузки:

<input type="file" id="pdfUpload" accept="application/pdf">
<select id="format">
  <option>JPG</option>
  <option>PNG</option>
  <option>WEBP</option>
</select>
<input type="range" id="quality" min="10" max="100" value="90">
<button onclick="convertPDF()">Convert to Images</button>

Это позволяет пользователям загружать PDF-файлы прямо в браузер

Чтение PDF и рендеринг страниц на Canvas

После загрузки файла нужно прочитать его с помощью JavaScript:

const file = document.getElementById("pdfUpload").files[0];
const reader = new FileReader();
reader.onload = async function () {
  const typedArray = new Uint8Array(reader.result);
  const pdf = await pdfjsLib.getDocument(typedArray).promise;
  console.log(pdf.numPages);
};
reader.readAsArrayBuffer(file);

Это загружает PDF-документ прямо внутри браузера, после чего можно получить доступ к каждой странице по отдельности

После загрузки PDF страницы рендерятся на canvas:

const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 2 });
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = viewport.width;
canvas.height = viewport.height;
await page.render({ canvasContext: context, viewport: viewport }).promise;

Это визуально рендерит выбранную страницу PDF внутри браузера. После рендеринга canvas конвертируется в изображение:

const imageData = canvas.toDataURL("image/jpeg", 0.9);

Это создаёт скачиваемую версию страницы PDF в виде изображения

Выбор формата изображения и качества

Перед генерацией финальных изображений пользователи могут настроить параметры вывода. Разные форматы подходят для разных ситуаций:

• JPG — меньший размер файлов
• PNG — лучшее качество без потерь
• WEBP — современное сжатие с хорошим балансом качества и размера

Пользователи также управляют качеством изображения с помощью ползунка:

canvas.toDataURL("image/jpeg", 0.8);

Значение 0.8 управляет коэффициентом сжатия: чем ближе к 1.0, тем выше качество и больше размер файла

Экспорт Canvas в JPG, PNG или WEBP и скачивание

После рендеринга страниц изображения скачиваются прямо из браузера:

const link = document.createElement("a");
link.href = imageData;
link.download = `page-${pageNumber}.jpg`;
link.click();

Это мгновенно скачивает сгенерированное изображение. При работе с многостраничными PDF-файлами тот же процесс автоматически выполняется для каждой страницы, что позволяет экспортировать полные PDF-документы в виде отдельных файлов изображений

Полный пример: конвертация PDF в изображения в браузере

В этом примере мы конвертируем страницы PDF в скачиваемые файлы изображений прямо внутри браузера

Шаг 1: Загрузка PDF-файлов

Пользователи загружают один или несколько PDF-файлов в конвертер

Шаг 2: Предварительный просмотр загруженных страниц

Инструмент генерирует предварительный просмотр страниц перед конвертацией. Это помогает пользователям визуально проверить загруженный документ

Шаг 3: Настройка параметров вывода

Пользователи выбирают формат изображения и настройки качества перед генерацией. Это обеспечивает контроль над размером вывода и чёткостью изображения

Шаг 4: Конвертация страниц PDF в изображения

После настройки параметров пользователи нажимают кнопку конвертации. Браузер обрабатывает PDF локально и мгновенно генерирует файлы изображений

Шаг 5: Скачивание сгенерированных изображений

После конвертации каждая страница PDF становится скачиваемым изображением

Оптимизация производительности при работе с большими файлами

При работе с большими PDF-файлами производительность и использование памяти становятся критическими факторами. Документы с большим количеством страниц могут замедлить рендеринг, если всё обрабатывается одновременно

На практике я убедился, что пошаговая обработка страниц работает значительно стабильнее, чем рендеринг всего документа сразу:

for (let i = 1; i <= pdf.numPages; i++) {
  const page = await pdf.getPage(i);
  // render page
}

Это делает использование памяти браузера более предсказуемым. Ещё одна полезная оптимизация — уменьшение масштаба рендеринга для больших документов:

const viewport = page.getViewport({ scale: 1.5 });

Меньшие значения масштаба генерируют файлы изображений меньшего размера и улучшают производительность. Размер canvas также можно явно контролировать перед экспортом:

canvas.width = viewport.width;
canvas.height = viewport.height;

Это помогает уменьшить излишний рост размера файла. Поскольку всё работает локально внутри браузера, загруженные PDF-файлы никогда не покидают устройство пользователя — это повышает конфиденциальность и безопасность

Распространённые ошибки, которых следует избегать

Одна из распространённых ошибок — не проверять загруженные файлы перед их обработкой:

if (!file || file.type !== "application/pdf") {
  alert("Please upload a valid PDF file.");
  return;
}

Это предотвращает поломку инструмента из-за неподдерживаемых файлов

Другая проблема — рендеринг чрезвычайно больших страниц при очень высоких значениях масштаба. Большой canvas потребляет много памяти и значительно замедляет конвертацию. Использование меньших значений масштаба обычно улучшает производительность без заметной потери качества

Ещё одна распространённая ошибка — забыть дождаться завершения рендеринга страницы перед экспортом изображения:

await page.render({ canvasContext: context, viewport: viewport }).promise;

Без await изображение может экспортироваться до завершения рендеринга, и вы получите пустой или частично отрисованный файл

Неправильное именование файлов также запутывает пользователей при генерации нескольких страниц. Добавление номеров страниц к именам файлов улучшает организацию и делает результат предсказуемым

В этом руководстве мы разобрали, как создать браузерный конвертер PDF в изображения с помощью JavaScript. Вы узнали, как загружать PDF-файлы, рендерить страницы внутри браузера, генерировать изображения и скачивать их напрямую без использования бэкенд-сервера

Современные браузеры могут обрабатывать задачи работы с документами локально, сохраняя при этом конфиденциальность файлов пользователей. Такой подход делает инструмент быстрым, лёгким и удобным в использовании

Как только вы освоите этот рабочий процесс, его можно расширить дополнительными функциями: скачивание ZIP-архивов, пакетный экспорт, выбор страниц, добавление водяных знаков или сжатие изображений

Ответы на эти вопросы могут быть для вас полезными

Нужен ли сервер для конвертации PDF в изображения с помощью JavaScript?

Нет. Вся обработка происходит локально в браузере с помощью библиотеки PDF.js. Файлы не покидают устройство пользователя

Какой формат изображения лучше выбрать — JPG, PNG или WEBP?

JPG подходит, когда важен небольшой размер файла. PNG сохраняет качество без потерь и лучше подходит для документов с текстом. WEBP даёт хороший баланс между качеством и размером, но поддерживается не всеми приложениями

Как ускорить конвертацию многостраничных PDF-файлов?

Обрабатывайте страницы последовательно в цикле, а не одновременно. Также уменьшите значение масштаба (scale) при вызове getViewport — это снижает нагрузку на память и ускоряет рендеринг

Что произойдёт, если пользователь загрузит не PDF-файл?

Без валидации инструмент может сломаться или вернуть пустой результат. Добавьте проверку типа файла через file.type !== "application/pdf" и выводите понятное сообщение об ошибке

Можно ли конвертировать только отдельные страницы PDF, а не весь документ?

Да. PDF.js позволяет получить доступ к любой странице по номеру через pdf.getPage(pageNumber). Достаточно добавить в интерфейс поле выбора диапазона страниц и передавать нужные номера в цикл рендеринга