Генерация PDF на клиенте: квест с элементами квеста и хардкора
Сделать PDF с выделяемым текстом на фронтенде — задача, перед которой пасуют даже бывалые. Но METABYTE знает лазейки.
Казалось бы, что может быть проще? Берёшь HTML, кидаешь в браузер, жмёшь «Сохранить как PDF» — и готово. Но если вам нужен не просто скриншот, а настоящий документ с текстом, который можно выделить, скопировать и поискать — добро пожаловать в адский квест.
Разработчики, пытавшиеся сгенерировать PDF на клиенте, знают: это как собрать IKEA-стеллаж без инструкции, да ещё и с кривыми деталями. В статье на SDocs.dev разбирают подводные камни: от проблем с шрифтами до неожиданного поведения CSS при печати. Чего стоит только тот факт, что браузеры по-разному рендерят один и тот же HTML в PDF!
Оказывается, библиотеки вроде jsPDF или html2canvas — это лишь верхушка айсберга. Они либо генерируют изображение вместо текста, либо требуют ручной разметки каждой буквы. А если вам нужно сохранить ссылки, закладки или метаданные — готовьтесь писать собственный велосипед.
Но есть и хорошие новости: современные подходы, такие как использование Puppeteer на сервере или WebAssembly-версии wkhtmltopdf, позволяют добиться почти идеального результата. Правда, за это приходится платить сложностью инфраструктуры.
В итоге, если ваш стартап планирует фичу «скачать отчёт в PDF», готовьтесь к тому, что это займёт больше времени, чем весь остальной фронтенд. И да, не забудьте про тесты — иначе в один прекрасный день пользователи увидят вместо таблицы набор иероглифов.
Комментарий студии METABYTE: Мы тоже прошли этот путь и теперь знаем, где лежат грабли. Если вам нужен PDF, который не стыдно отправить клиенту, — мы подскажем, как не наступить на те же ошибки. И да, мы умеем делать это без ночных деплоев.