6 библиотек JavaScript для создания PDF

0
196
views

Перевод статьи «A full comparison of 6 JS libraries for generating PDFs».

В этой статье я сравню несколько JS-библиотек для генерации PDF. Сравнивать будем по следующим критериям:

  • среда выполнения
  • поддерживаемые модули
  • поддержка TypeScript
  • пользовательские шрифты
  • простота использования.

Надеюсь, что после прочтения этой статьи вам будет проще подобрать подходящую библиотеку для своего следующего приложения.

1. PDFKit

PDFKit — одна из первых библиотек для создания PDF, появившихся в огромной экосистеме JavaScript. Она доступна с 2012 года и в 2021 году все еще получает обновления.

Использовать эту библиотеку немного сложнее, чем другие. Но когда мы будем разбирать другие библиотеки, вы заметите, что некоторые из них по сути являются врапперами (обертками) для PDFKit.

PDFKit предлагает поддержку и Node, и браузера через Webpack. Она поддерживает пользовательские шрифты и встраивание изображений, но у нее нет высокоуровневого API.

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

Итоги:

  • Работает в Node и браузере — с некоторыми сложностями
  • TypeScript — поддерживается
  • Пользовательские шрифты — следует соблюдать осторожность при использовании в браузере
  • Простота использования — библиотека несколько сложная.

2. pdfmake

pdfmake — это враппер, построенный вокруг PDFKit. Основное отличие этой библиотеки — парадигма программирования. PDFKit придерживается классического императивного стиля, а pdfmake исповедует декларативный подход.

Благодаря этому отличию вы сможете сосредоточиться на том, что хотите сделать, не тратя драгоценное время на то, чтобы объяснить библиотеке, как достичь желаемого результата.

Но не все то золото, что блестит. Вы можете столкнуться с проблемами при попытке встроить пользовательские шрифты, используя Webpack. К сожалению, в интернете довольно мало документации по этой проблеме. Но если вы не используете Webpack, вы запросто сможете клонировать git-репозиторий и запустить скрипт для встраивания шрифтов.

Итоги:

  • Работает в Node и браузере — следует соблюдать осторожность при использовании Webpack
  • TypeScript — поддерживается
  • Пользовательские шрифты — придется встраивать самостоятельно
  • Простота использования — на высоте.

3. jsPDF

jsPDF — очень популярная библиотека (это видно по ее статистике на GitHub), и это не случайно: она отличается высокой надежностью и имеет хорошую поддержку. Модули экспортируются согласно AMD-стандарту, благодаря чему достигается простота использования и с Node, и с браузерами.

Как и в случае с PDFKit, API jsPDF предлагают императивный шаблон, из-за чего довольно трудно создать сложный макет.

Встраивать шрифты не сложно, но требуется сделать дополнительный шаг: конвертировать их в TTF.

jsPDF — не самая простая библиотека для освоения, но у нее очень подробная документация, так что вы сможете разобраться с любой возникшей проблемой.

Итоги:

  • Работает в Node и браузере — да
  • TypeScript — поддерживается
  • Пользовательские шрифты — нужно конвертировать в ttf-файлы
  • Простота использования — библиотека несколько сложная.

4. Puppeteer

Как вы наверное знаете, Puppeteer — это библиотека Node, предоставляющая высокоуровневый API для контроля Chrome. Но помимо этого она также может использоваться для создания PDF.

Шаблоны должны писаться на HTML, в силу чего jsPDF проста в использовании для веб-разработчиков.

Вот хорошая статья о том, как пользоваться этой библиотекой для создания PDF: Generate a PDF from HTML with puppeteer.

Puppeteer имеет два основных недостатка:

  • необходимо реализовывать бэкенд-решение
  • каждый раз, когда вам нужно создать PDF, нужно запускать Puppeteer, а это создает излишнюю нагрузку. Работает медленно.

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

Итоги:

  • Работает и в Node, и в браузере — нет
  • TypeScript — не поддерживается
  • Пользовательские шрифты — веб-шрифты
  • Простота использования — есть разные мнения на этот счет.

5. pdf-lib

pdf-lib — это библиотека для создания и редактирования PDF, реализованная полностью на Typescript. Как и pdfmake, она построена на основе PDFKit.

Хотя эта библиотека вышла позже остальных, она очень популярна и имеет тысячи звезд на GitHub. Работает она и с Node, и с браузерами. Ее API прекрасно спроектированы.

pdf-lib поддерживает склеивание, разрезание, встраивание PDF и имеет много функций, которых попросту нет в других библиотеках.

При всей своей мощи pdf-lib очень проста в использовании.

Одна из самых горячих фич этой библиотеки — поддержка Unit8Array и ArrayBuffer для встраивания файлов шрифтов, что позволяет использовать fs при работе с Node и xhr при работе с браузером. Попробовав эту библиотеку в деле, вы почувствуете, насколько она лучше других библиотек в плане производительности. С Webpack, конечно, ее тоже можно использовать.

pdf-lib исповедует императивный подход, так что, как вы уже можете догадаться, создавать с ее помощью сложные макеты будет нелегко.

Итоги:

  • Работает в Node и браузере — да
  • TypeScript — поддерживается
  • Пользовательские шрифты — поддерживаются
  • Простота использования — есть некоторые сложности, макет нужно высчитывать.

6. labelmake

Наконец, позвольте представить вам мою собственную библиотеку — враппер для pdf-lib. Я разработал ее, чтобы сделать pdf-lib как можно более декларативной.

В отличие от pdf-lib, labelmake не требует от разработчика просчитывать макет самостоятельно: вам нужно лишь определить постоянные отступы, высоту строк и т. п.

Пример кода можно посмотреть здесь.

labelmake сохраняет преимущества pdf-lib — возможность использовать Uint8Array и ArrayBuffer для данных шрифтов, а также возможность встраивать PDF-файлы. Но вместе с тем она позволяет разработчику эффективно создавать сложные макеты.

Вы также можете воспользоваться инструментарием Template Design & Code Generator, чтобы спроектировать макет PDF и генерировать выполняемый код!


Возможно, вас также заинтересуют следующие статьи:

frontend logo

Хочешь проверить свои знания по фронтенду?

Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!

×

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here