WblCHA
@WblCHA

Как сгенерировать PDF с использованием своих шрифтов?

Есть сервер на NextJS на strict TS и, помимо основных задач, необходимо некоторую информацию отправлять в виде PDF.
И тут возникает проблема, пдф собирается, отправляется и получается, но так как шрифты не подключаются при сборке html'а, то везде получается Times New Roman, что, очевидно, не годится.

На данный момент я уже попробовал решить данную проблему с помощью:
  1. html-pdf ─ всё работает прекрасно, пдф собирается, за исключением того, что прикрепить шрифты мне так и не удалось. Не знаю, в чём основная проблема, абсолютный путь как уже не указывал, всё равно ноль эффекта (и да, у меня WSL консоль).
  2. jspdf ─ в нём можно, как я понял, без гемора подключать шрифты, но проблема заключается в том, что в ноде он полноценно не работает даже с объявлением глобальных переменных. Функцию для прикрепления html'а я так и не смог починить.
  3. puppeteer ─ частично работает, но крайне нестабильно, страницы часто крашатся. Впрочем, шрифты всё равно не применяются (если открывать ту же страницу, что в пдф пихаю, в браузере, то там всё норм).


Добавлю ещё, что на текущий момент страница для пдфки полностью рендерится на сервере в виде реакт компонента (для первого и второго пекеджей), а далее преобразуется в строку и передаётся уже дальше для сбора пдфки.
  • Вопрос задан
  • 130 просмотров
Решения вопроса 1
WblCHA
@WblCHA Автор вопроса
Проблему решил.

Итак, вернулся я к html-pdf и проблема была в том, куда и как я указывал абсолютный путь и, что тоже важно, как я указывал путь до фонтов в пекедже styled-components с помощью createGlobalStyle.
А именно при укзании абсолютного пути в html-pdf он обязан заканчиваться на "/" (прим.: "file:///mnt/c/Users/usrname/Documents/repository-f..."), а в createGlobalStyle путь должен начинаться с названия папки или файла (путь релативный, относительно указанной папки в html-pdf), а не с "/". В ином случае, даже если абсолютный будет без "/", а релативный с "/", шрифты не подгрузятся (да и не только шрифты, а всё, что из той папки берётся).

Собственно, вот и всё, осталось только svg в пдф ещё запихнуть...

Upd.
Через какое-то время было принято решение перейти на puppeteer, поскольку html-pdf хоть и работает, в целом, как надо, но рендерит хтмл он не 1 в 1 как браузер и в итоге приходилось фиксить костылями те или иные графические баги. Более того, была проблема с некоторым несоответствием отображения ширины некоторых букв на пиксель, что вызывало очень заметное потолстение букв в пдфки на отдалении, а это решить так и не удалось.
Так вот, запихнуть шрифты в пупитир у меня так и не получилось, поэтому я пошёл по другому пути: сделал 2 разных пути для загрузки и для отображения пдфки, в первом открывается страничка в пупитире и запрашивается "фронтовая" пдфка со всем, чем надо.
Далее страничка конвертируется в пдфку с правильно отрендереным хтмл.

Отдельно отмечу, что пришлось использовать пупитир 1.18.0, по моему (или около того), поскольку в более свежих версиях пупитир упорно возвращал пустой пдф.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы