Серверная генерация PDF через Next.js

Задача по генерации PDF из страницы

В Yappifood нужно было добавить скачивание рецепта в PDF. Документ должен был сохранять изображение, ингредиенты и описание в том же порядке, что и страница.

Я использовал страницу рецепта как источник для PDF. Это позволяло опираться на существующую вёрстку вместо поддержки отдельного шаблона документа.

Загрузка страницы перед созданием PDF

На сервере требовалось открыть страницу, дождаться данных и изображений и выбрать область `#recipe-content`. Навигация и кнопки не должны были попасть в файл.

Puppeteer запускает браузер без видимого окна. В серверном окружении нужно было проверить доступность ресурсов, загрузку шрифтов и момент, когда страница готова к печати.

Как была устроена генерация PDF

Я реализовал генерацию через API-маршрут Next.js. Маршрут запускал Puppeteer, открывал страницу рецепта, ждал готовности нужной области и работал с селектором `#recipe-content`. Такой подход позволил использовать тот же браузерный рендер, что и на странице, вместо отдельного шаблона PDF.

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

• API-маршрут запускал генерацию и отдавал готовый PDF
• Puppeteer использовал реальный рендер страницы
• В PDF попадало только содержимое рецепта

Что важно учитывать в таком подходе

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

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

Источником PDF была область #recipe-content на странице рецепта.

Что получил пользователь

Пользователь получил возможность скачать PDF-рецепт через API Next.js. Puppeteer формировал файл из страницы, а печатные стили исключали лишние элементы интерфейса.

Когда подходит браузерная генерация

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