Сначала я использовал jsPdf для создания данных отчета как части приложения. Он очень популярен и хорошо задокументирован, но когда я столкнулся с необходимостью динамического контента, я обнаружил, что это не так просто, как я думал.

Дело в том, что каждый элемент в jsPdf необходим для установки своей позиции x и y на странице. Итак, чтобы добавить следующий элемент под ним, нам нужно указать, что текущий y больше, чем yна предыдущем элементе. Проблема в том, что мы никогда не знаем длину элемента. Это приводит к тому, что высота элемента может варьироваться, и я не могу найти правильный способ вычисления высоты динамического текста.

Проведя несколько часов в серфинге, я пришел к выводу, что лучшим решением такой проблемы является смена инструментов, мой любимый — pdfMake. Я попытался сделать этот макет с ним:

Вот 5 причин, по которым вам нужно использовать pdfMake:

1. Автоматическое позиционирование без хлопот

С pdfMake вам не нужно устанавливать x и y для каждого элемента. Позиционирование будет соответствовать структуре документа, и у него есть некоторые полезные функции, которые можно использовать, например. поля, выравнивание и т. д. Это также хорошо задокументировано здесь.

2. Поддерживает элемент ‹svg›

Если вам нужна простая графика для вашего документа, я рекомендую вам использовать функции HTML SVG вместо того, чтобы создавать графику извне.

скоро