Есть версия на русском языке. Перейти »

ASAP PDF

The first framework for fast
and easy PDF layout

Currently v1.0.0, Node v14.15.0+

ASAP PDF example

About

ASAP PDF is designed to create PDF files using HTML and CSS (Pug/SCSS). With ASAP PDF, you can:

  • Convert HTML to PDF on the fly;
  • Get an in-browser preview that’s nearly identical to the final PDF file;
  • Inline all external assets to your HTML without using third-party services (your images and fonts are encoded with base64, and styles are automatically inserted into the <head> tag);
  • Use ready-made text components;
  • Reuse your components with Pug;
  • Stop worrying about stylelint or pug-lint config, as they are already configured;
  • Perform screenshot testing of your project and get a detailed report.
Examples

Quick start

Requirements:

  • Node v14.15.0 or higher

Quick start guide:

  1. Download the ASAP PDF repository;
  2. In the project root folder, run npm i;
  3. To start the project:
    • Run npm start if you need to inline all external assets to HTML and convert the final HTML to PDF on the fly. The final PDFs will be saved in the folder /dist/pdf/. You can open these PDFs in your IDE to see the result of code changes immediately;
      To speed up your workflow, you have the option of choosing which HTML files will be converted to PDF on the fly.
    • Run npm run dev if you don't need to inline all external assets to HTML and convert the final HTML to PDF on the fly. Sourcemaps are available in this mode;
  4. Make a copy of the file /app/pug/pages/index.pug (or /app/html/html-example.html if you want to use HTML) and name it whatever you need;
  5. Create a SCSS file for the new page in the folder /app/scss/pages/ and import it in the file /app/scss/_pages.scss, if needed;
  6. Write markup in the file created in step 4. All the code should be written inside the block with .sheet.A4-m-15mm classes;
  7. Use ready-made utilities and components;
  8. The compiled project files will be saved in the /dist/ folder.

Resource inlining in HTML means base64 encoding of images and fonts (in both HTML and CSS), and embedding compressed CSS in HTML (into the <head> tag).

Who's using ASAP PDF?

Blanc bank

Support ASAP PDF

ASAP PDF is developed by our small, friendly team; we work on the project in our free time. We would appreciate it if you support ASAP PDF and motivate us to develop it.

Donation platforms:

Boosty:

Features

Converting HTML to PDF

On the fly (using Puppeteer)

Image compression

All images are optimized during the project assembly

Base64

Assets are encoded with base64 and inserted into the HTML on the fly

PurgeCSS

PurgeCSS will help you get rid of unnecessary CSS

SCSS and Pug linters

Stylelint and pug-lint help your team maintain consistent code style

Mock data

Simplest mocking with data substitution from JSON

ASAP PDF uses Puppeteer to convert HTML to PDF, so it is recommended to use Puppeteer Sharp to get the same conversion results on the backend.