pdforge

Product

Resources

Integrations

Pricing

Try for free

pdforge

pdf guide

Javascript

How to Generate Dynamic QR Codes for Your PDF Reports

Marcelo | Founder

Feb 12, 2025

Why Dynamic QR Codes Matter for PDF Reports

Integrating dynamic QR codes into your PDF reports boosts user engagement and offers real-time updates. Unlike static codes, dynamic QR codes can be edited or redirected even after printing. They act as direct gateways to external websites, payment pages, or app downloads—enhancing interactivity and capturing valuable analytics data. For SaaS businesses, this means instant updates to invoice URLs, product pages, or user profiles without reissuing new PDF documents.

Additionally, dynamic QR codes enable you to track analytics, providing valuable insights into user engagement with your content. This makes them an invaluable asset for SaaS applications that require flexibility and real-time updates.

How to generate dynamic QR Codes for your pdfs

Overview of Top JavaScript QR Code Libraries

When it comes to generating QR codes in JavaScript, several robust libraries can facilitate the process. In this section, we will evaluate teo of the most prominent libraries:

• QRCode.js

• qrcode-generator

These libraries are widely used and offer various features suitable for different project requirements.

QRCode.js

QRCode.js offers a straightforward API for QR code generation. It supports both canvas and table rendering methods, providing flexibility depending on your project’s requirements.

Example:

<script src="https://cdn.jsdelivr.net/npm/qr-code.js@1.0.0/qr-code.min.js"></script>
<canvas id="canvas"></canvas>
<script>
  let qr = new QRCode({
    content: "https://example.com",
    width: 128,
    height: 128,
    color: "#000000",
    background: "#ffffff",
    canvas: document.getElementById('canvas')
  });
</script>

qrcode-generator

qrcode-generator provides advanced features for generating QR codes, including multiple modes, error correction levels, and the ability to encode complex data (e.g., vCard information). It’s an excellent choice for SaaS applications requiring higher fault tolerance and more intricate functionality, such as payment receipts or secure document links.

Example:

<script src="https://cdn.jsdelivr.net/npm/qrcode-generator/qrcode.js"></script>
<div id="qrcode"></div>
<script>
  let typeNumber = 4;
  let errorCorrectionLevel = 'L';
  let qr = qrcode(typeNumber, errorCorrectionLevel);
  qr.addData('https://example.com');
  qr.make();
  document.getElementById('qrcode').innerHTML = qr.createImgTag();
</script>

Our Recommendation: QRCode.js

After evaluating various libraries, QRCode.js stands out for its frequent updates, intuitive API, and robust performance. Whether you’re embedding codes in SaaS invoices or interactive product catalogs, its straightforward integration and flexible rendering options make it the go-to library for most dynamic QR code needs.

It is the most updated, simpler to use, and the most reliable library among the three. Its ease of integration and robust functionality make it ideal for integrating dynamic QR codes into your PDF reports.

Generating Dynamic QR Codes Programmatically

To create a QR code for your PDF document, you can start by creating an invoice template in HTML and CSS, incorporating a section dedicated to the QR code.

Creating the Invoice Template

Here’s a simple example of an invoice template with a QR code section:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Your CSS styles here */
        #qrcode {
            width: 128px;
            height: 128px;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div id="invoice">
        <h1>Invoice #12345</h1>
        <!-- Invoice details here -->
        <div id="qrcode"></div>
    </div>
</body>
</html>

Importing the Library into the Invoice

Next, import qrcode.js into your invoice template and generate the QR code dynamically.

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    let qrData = "https://yourdomain.com/invoice/12345";
    new QRCode(document.getElementById("qrcode"), qrData);
</script>

Using HTML Template Engines for Dynamic QR Codes

To handle dynamic data more efficiently, you can utilize HTML template engines like Handlebars. Handlebars allows you to embed JavaScript variables directly into your HTML in a clean and readable manner.

Example with Handlebars:

<div id="qrcode"></div>
<script>
    let qrData = "{{invoiceURL}}";
    new QRCode(document.getElementById("qrcode"), qrData);
</script>

Generating the PDF

After setting up your HTML template with the dynamic QR code, you can use PDF generation tools like Playwright to convert the HTML into a PDF document. Playwright is a Node.js library that allows for high-fidelity rendering of web content, providing more control over the rendering process and better compatibility with modern web features.

Example using playwright:

const playwright = require('playwright');
const Handlebars = require('handlebars');
const fs = require('fs');

(async () => {
    // Read and compile the Handlebars template
    const templateHtml = fs.readFileSync('invoice.html', 'utf8');
    const template = Handlebars.compile(templateHtml);
    const data = { invoiceURL: 'https://yourdomain.com/invoice/12345' };
    const html = template(data);

    // Launch a headless browser instance
    const browser = await playwright.chromium.launch();
    const context = await browser.newContext();
    const page = await context.newPage();

    // Set the page content to the generated HTML
    await page.setContent(html, { waitUntil: 'networkidle' });

    // Generate the PDF from the page content
    await page.pdf({
        path: 'invoice.pdf',
        format: 'A4',
        printBackground: true
    });

    // Close the browser instance
    await browser.close();
})();

This approach allows you to programmatically generate PDFs with dynamic QR codes, providing a seamless experience in your SaaS application.

We have a full guide on how to generate pdf from html using playwright with javascript here.

If you want to check out guides for pdf from html conversion of other programming languages, check out here.

Best Practices Addition

Size

• Ensure the QR code is at least 1 inch (2.5 cm) in size for reliable scanning. Place it where it doesn’t obstruct important text.

Contrast

• Use a dark QR code on a light background (or vice versa) for maximum readability. Avoid overly busy or patterned backgrounds.

Error Correction

• For marketing or essential documents, enable medium-to-high error correction (e.g., “M” or “Q”) so the code is scannable even if slightly damaged.

Calls to Action

• Include a short instruction: “Scan to view invoice” or “Scan for payment options.” Clear prompts improve user engagement.

Testing

• Test scanning on multiple devices and in different lighting conditions. Print a physical copy to confirm that the code remains clear and functional.

Tracking & Analytics

• Use dynamic URLs or a URL shortener with analytics to see when, where, and how often the code is scanned. Update the target URL as needed without reprinting.

Using pdforge: A Third-Party No-Code PDF Builder

If you prefer a no-code solution, third-party services like pdforge offer template builders that allow you to generate PDFs with dynamic QR codes as pre-made components without writing any code. With pdforge, you can design your PDF templates visually and insert QR code elements that automatically generate based on your data inputs.

Benefits of Using pdforge

• Easy to Use: Create professional-looking PDF documents with dynamic QR codes using an intuitive drag-and-drop interface.

• Time Efficiency: Save development time by avoiding the need to code the PDF generation and QR code integration.

• Customization: Tailor your templates extensively to match your branding and specific requirements.

How can you generate the QR Code

1. Design Your Template: Use pdforge’s template builder to create your PDF layout, adding text, images, and the QR code component.

2. Generate PDFs: Use pdforge’s API to generate the PDF documents with the dynamic QR codes embedded, sending the QR code value and other variables as parameters. (As you can see on the picture the qr_code variable would be report_link_url)

Heres an example of an API call:

fetch('https://api.pdforge.com/v1/pdf/sync', {
  method: 'POST',
  body: JSON.stringify({ templateId: 'your-template' , data: {report_link_url:'https://example.com' } }),
  headers: { 'Authorization' : 'Bearer your-api-key' }
});

Conclusion

Integrating dynamic QR codes into your PDF reports substantially boosts user engagement, data accessibility, and overall interactivity. By leveraging QRCode.js or another robust library—and combining it with tools like Playwright (for PDF generation) or pdforge (for no-code workflows)—you can seamlessly embed scannable, updatable links in your documents. Always remember to follow best practices for sizing, contrast, and testing to ensure reliable scans. Whether you’re aiming to track user activity or simplify user access to additional resources, dynamic QR codes are a powerful, future-proof solution for modern SaaS applications.