ASAP PDF
Первый фреймворк для быстрой
и удобной вёрстки PDF
Текущая версия v1.0.0, Node v14.15.0+
О фреймворке
ASAP PDF предназначен для создания PDF-документов с помощью HTML и CSS (Pug/SCSS). С помощью ASAP PDF вы можете:
- Конвертировать HTML в PDF на лету;
- Видеть в браузере результат, максимально приближенный к итоговому PDF;
- Вставлять все используемые ресурсы прямо в HTML без использования сторонних сервисов (ваши изображения и шрифты кодируются в Base64, а стили автоматически вставляются в head);
- Использовать готовые текстовые компоненты;
- Переиспользовать компоненты благодаря Pug;
- Не беспокоиться за настройку stylelint или pug-lint — они уже настроены;
- Проводить скриншот-тестирование проекта с удобным отчётом о результатах тестирования.
Быстрый старт
Требования:
- Node v14.15.0 и выше
Порядок работы:
- Скачайте репозиторий ASAP PDF;
- В корневой папке проекта выполните
npm i; - Запуск проекта:
- Выполните
npm start, если вам нужно упаковывать все ресурсы в HTML и конвертировать получившийся HTML в PDF на лету. Готовые PDF будут сохраняться в папке/dist/pdf/. Вы можете открыть PDF-файл в своей IDE для того, чтобы сразу видеть результат изменений в коде;Для ускорения работы можно выбрать , какие именно HTML-файлы будут конвертироваться в PDF на лету. - Выполните
npm run dev, если вам не нужно упаковывать все ресурсы в HTML и конвертировать получившийся HTML в PDF на лету. В этом режиме доступны sourcemaps;
- Выполните
- Создайте копию файла
/app/pug/pages/index.pug(или/app/html/html-example.html, если хотите использовать HTML) и назовите его так, как вам нужно; - Если необходимо, в папке
/app/scss/pages/создайте SCSS-файл стилей для новой страницы и подключите его к файлу/app/scss/_pages.scss; - Пишите разметку в файле, созданном в пунке 4. Весь код должен быть написан внутри блока с классами
.sheet.A4-m-15mm; - Используйте готовые утилиты и компоненты;
- Скомпилированные итоговые файлы проекта будут сохраняться в папке
/dist/.
Под упаковкой ресурсов в HTML подразумевается кодирование изображений и шрифтов
в base64 (как в HTML, так и в CSS), и вставка сжатого CSS в HTML
(в тег <head>).
Поддержка ASAP PDF
ASAP PDF разрабатывается в свободное время небольшой дружной командой. Нам будет приятно, если вы поддержите наш проект и мотивируете нас к развитию проекта.
CloudTips:
Возможности
Компоненты
Библиотека компонентов для вёрстки PDF
Конвертация в PDF
На лету (с помощью Puppeteer)
Оптимизация изображений
Все изображения оптимизируются в процессе сборки
Base64
Кодирование ресурсов в Base64 и их вставка в HTML на лету
Удаление неиспользуемого CSS
PurgeCSS поможет избавиться от лишнего кода
Pug
Лаконичный и мощный шаблонизатор HTML
SCSS
Пожалуй, лучший препроцессор для CSS
Мокирование данных
Простейшее мокирование с подстановкой данных из JSON
Тестирование
Тестирование с подробным отчётом о результатах. О тестировании ASAP PDF
Исчерпывающая документация
Подробная документация в форматеStorybook
В ASAP PDF для конвертирования HTML в PDF используется Puppeteer, поэтому для получения таких же результатов конвертирования на стороне BackEnd рекомендуется использовать Puppeteer Sharp.