Ask Anvil

Answers to questions about automating PDFs, e-signatures, Webforms, and other paperwork problems.
PDFs
Categories

How can I convert HTML and CSS to PDF?

For most use cases where you need reliable, modern HTML and CSS support, Anvil or Puppeteer is the recommended solution due to their ability to handle complex CSS (and in Puppeteer's case, JavaScript). If a simpler, client-side method is preferred, html2pdf.js offers a quick and easy setup. For server-based environments where high scalability is required, WKHTMLTOPDF or WeasyPrint are solid choices.

Choose the method based on your requirements for scalability, complexity, and environment.

Best: Anvil

Overview

Anvil is a web-based platform that simplifies the process of building web applications, including converting HTML and CSS to PDF. The Anvil PDF renderer can generate PDFs from HTML and CSS with ease, making it a powerful tool for developers who want to create printable or downloadable documents dynamically from web content. This is often used for generating invoices, reports, or certificates in web applications.

  • Installation: There’s no need for a complex installation to convert HTML and CSS to PDF using Anvil, as Anvil is a fully hosted solution. However, you can follow these steps to get started:
    • Sign up for Anvil: Create an account at Anvil's website if you haven't done so already.
    • Create a new app: Start a new project or open an existing one.
    • Convert HTML to PDF: Write your HTML and CSS as you normally would, then call Anvil’s API to convert it to a PDF.
  • Advantages:
    • No need for external libraries: Everything is built into Anvil, so there’s no requirement to install additional packages or services.
    • Easy integration: Use an existing API client or call the API directly to convert HTML/CSS to PDF.
    • Dynamic content: You can dynamically generate PDF content from form data or other inputs, making it flexible for various use cases.
    • Efficient: The conversion to PDF happens on the server, so unlike Puppeteer that spins up an entire browser to render your PDF, the API is fast.
  • Disadvantages:
    • Hosted solution: Since Anvil is a fully hosted service, you don’t have full control over the environment, which could be a disadvantage for users who prefer self-hosting solutions.
    • Cost considerations: While Anvil offers a free tier, certain features or high volumes of PDF generation may require a paid plan. 500 PDF generation API calls / month are free.

1. Using JavaScript libraries (client-side)

Client-side solutions work directly in the browser using JavaScript. They are suitable when you want to generate PDFs dynamically on the client side without involving the server.

a. jsPDF

  • Overview: A popular client-side library for generating PDF documents using JavaScript.
  • Installation: Can be included via CDN or installed using npm (`npm install jspdf`).
  • Example:
const { jsPDF } = require("jspdf");

const doc = new jsPDF();

doc.text("Hello World!", 10, 10);

doc.save("document.pdf");

  • Advantages:
    • No server-side processing; everything happens in the browser.
    • Lightweight and easy to integrate.
    • Can be combined with other libraries (e.g., `html2canvas`) to convert HTML elements to PDFs.
  • Disadvantages:
    • Limited support for complex CSS styles.
    • Not suitable for large documents or complex layouts.

b. html2pdf.js

  • Overview: A wrapper around jsPDF and html2canvas to generate PDFs from HTML directly.
  • Installation: Available via CDN or npm (`npm install html2pdf.js`).
  • Example:
import html2pdf from 'html2pdf.js';

const element = document.getElementById("content-to-print");

html2pdf().from(element).save();
  • Advantages:
    • Easy to use for basic use cases.
    • Supports converting entire HTML elements, making it straightforward for static content.
  • Disadvantages:
    • Does not fully support all CSS features, such as advanced flex/grid layouts.
    • Limited customization options.

2. Server-side libraries and tools

Server-side approaches are generally more powerful and can handle more complex requirements, such as generating PDFs from templates, large documents, and content with complex CSS.

a. Puppeteer (Headless Chrome)

  • Overview: Puppeteer is a Node.js library that provides an API to control a headless version of Chrome. It's suitable for rendering HTML and CSS in a fully browser-compatible manner, allowing precise control over how a PDF is generated.
  • Installation: Install via npm (`npm install puppeteer`).
  • Example:
const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto('http://localhost/page-to-convert.html', { waitUntil: 'networkidle2' });

await page.pdf({ path: 'document.pdf', format: 'A4' });

await browser.close();

})();
  • Advantages:
    • Full support for modern CSS and JavaScript, as it uses a real browser engine.
    • Highly customizable output, including options for headers, footers, page sizes, and margins.
    • Suitable for both static and dynamic content.
  • Disadvantages:
    • Requires a server-side environment, which may add complexity and overhead.
    • Puppeteer can be resource-intensive for large-scale use.

b. WKHTMLTOPDF

  • Overview: A command-line tool that uses WebKit to convert HTML and CSS to PDF. It’s efficient and offers good support for HTML/CSS features.
  • Installation: Installed as a standalone tool (`apt-get install wkhtmltopdf`) or can be integrated into Node.js via packages like `wkhtmltopdf` (`npm install wkhtmltopdf`).
  • Example:
  • Advantages:
    • Produces high-quality PDF output.
    • Good support for complex layouts, pagination, headers/footers, and CSS.
    • Can be automated easily using shell scripts or integrated into server-side codebases.
  • Disadvantages:
    • Requires a server environment and is more challenging to set up compared to client-side libraries.
    • Limited customization options compared to Puppeteer.

c. WeasyPrint (Python)

  • Overview: A powerful Python library for converting HTML and CSS to PDFs using WebKit.
  • Installation: Requires Python and can be installed via pip (`pip install weasyprint`).
  • Example:
  • Advantages:
    • Excellent CSS support, including media queries and print styles.
    • Capable of handling complex documents with multiple pages and layouts.
    • Suitable for Python-based web frameworks like Django or Flask.
  • Disadvantages:
    • Requires Python environment and server-side execution.
    • Setup may be complex for non-Python environments.

3. API-based solutions

There are third-party API services that allow you to send HTML content or URLs and receive PDFs in response. These services are often used when a simple, scalable solution is needed without managing the PDF generation infrastructure.

Examples:
  • PDFreactor: A robust API with extensive HTML/CSS support but typically requires a subscription.
  • PDFShift: A simple API for generating PDFs from URLs or HTML strings.
  • CloudConvert: Supports HTML to PDF conversion as part of its file conversion API.
  • Advantages:
    • No need to manage or configure server-side software.
    • Scalable solutions suitable for high-load environments.
  • Disadvantages:
    • May incur costs, especially for high volumes or advanced features.
    • Less control over the customization compared to in-house solutions.

Best practices for HTML to PDF conversion

  • Use Print Stylesheets: For client-side and server-side rendering, define a CSS print stylesheet (`@media print`) to optimize how elements are displayed in the PDF.
  • Optimize Performance: When using browser-based tools (like Puppeteer), ensure resources (images, scripts) are preloaded or embedded to minimize load times.
  • Test Across Environments: Different libraries and tools render CSS differently. Testing your templates across the tools you plan to use is crucial.

Common use cases in Anvil-based solutions

  • Generating Invoices and Receipts
    • Implementation: Server-side tools like WeasyPrint or Puppeteer can be integrated directly into Anvil’s Python backend to render HTML templates populated with transaction data.
  • Creating Reports and Dashboards for Data Analytics
    • Implementation: The combination of Puppeteer and Anvil’s HTTP endpoints allows for converting HTML dashboards directly to PDF documents. A dashboard page in Anvil can be accessed via a secured URL, and Puppeteer can automate rendering this page into a PDF.
    • This setup ensures the report can be dynamically generated with the latest data.
  • Exporting Forms and Certificates
    • Implementation: Using Python libraries like WeasyPrint with Anvil’s templating system allows developers to build HTML forms and style them precisely with CSS. These forms can then be converted to PDFs using WeasyPrint.
    • This method is efficient for generating personalized documents that can be downloaded directly from the user interface.
  • Generating Multi-Page PDFs for Contracts or Proposals
    • Implementation: Tools like WKHTMLTOPDF can be integrated with Anvil’s server module to handle the conversion of these multi-page HTML documents. These tools support pagination, headers, and footers, which are essential for professional document formatting.
    • This method ensures the generated PDFs maintain consistency with legal and branding requirements.
Back to All Questions
Anvil Logo

The fastest way to build software for documents

Anvil Document SDK is a comprehensive toolbox for product teams launching document flows where PDF filling, signing, and complex conditional scenarios are necessary.
Explore Anvil
Anvil Webforms