Converting Django templates with HTML and CSS into downloadable PDF files

Question

Converting Django templates with HTML and CSS into downloadable PDF files

Struggling to convert HTML & CSS into a downloadable PDF page using Django and Weasyprint. The current tutorial isn't working as expected - I need the PDF to render the current page when the user clicks on the download button, automatically downloading with read-only privileges. This entire process is turning out to be more challenging than anticipated.

Weasyprint only converts a URL in Django to a PDF file, but I can't figure out how to link the download button to the Weasyprint view.

I might be overcomplicating things - any help would be greatly appreciated.

Here's an example of Weasyprint code:

 (code snippet)

I set up a virtual environment on my PC exactly like the example provided, currently utilizing Bootstrap 4.

If there's a better way to achieve this, please share your insights :)

Moreover, I'm looking to target only the body tags for conversion to PDF, not the entire webpage.

Previously, I tried using this solution: https://codepen.io/AshikNesin/pen/KzgeYX, but it didn't work effectively.

*EDIT 2.0*

Switching to JavaScript now, I'm struggling with a script that doesn't create a PDF form upon clicking. Is there a way to ensure the JS function downloads only the selected ID within the div, without affecting resolution or scale? (To avoid rendering unnecessary content)

https://jsfiddle.net/u4ko9pzs/18/

Any suggestions or advice would be highly appreciated.

javascript html css django bootstrap-4

Answer 1

Answer №1

After experimenting with django-wkhtmltopdf and weasyprint, I found that while weasyprint is more versatile when it comes to CSS, it still doesn't perfectly replicate the browser's rendering. The results were not satisfactory, especially when dealing with complex layouts.

For my specific requirement of creating a pixel-perfect 'certificate' PDF with an SVG background, puppeteer turned out to be the solution as it ensured compatibility with minimal modifications to the CSS. However, using puppeteer requires Node.js (which I was already using for asset compilation).

Puppeteer CLI:

npm i- puppeteer-pdf

Install the Django wrapper

pip install django-puppeteer-pdf

Include the Node puppeteer CLI start command in your settings:

PUPPETEER_PDF_CMD = 'npx puppeteer-pdf'

and create view:

from puppeteer_pdf import render_pdf_from_template
from django.http import HttpResponse, 
import os

# Rendering code 
context = {
    'data': 'test data'
}

output_temp_file = os.path.join(settings.BASE_DIR, 'static', 'temp.pdf')

pdf = render_pdf_from_template(
    input_template='path to template in templates dir'
    header_template='',
    footer_template='',
    context=context,
    cmd_options={
        'format': 'A4',
        'scale': '1',
        'marginTop': '0',
        'marginLeft': '0',
        'marginRight': '0',
        'marginBottom': '0',
        'printBackground': True,
        'preferCSSPageSize': True,
        'output': output_temp_file,
        'pageRanges': 1
    }
)
#you can remove temp file now or collecte them and run some crone task.(performance)
if os.path.exists(output_temp_file):
    os.remove(output_temp_file)
else:
    # raise error or something

filename = f'filename={'your donwload file name'}.pdf'

response = HttpResponse(pdf, content_type='application/pdf;')
response['Content-Disposition'] = filename

To preserve original colors, add this to your CSS:

html{
  -webkit-print-color-adjust: exact;
}

When using 'preferCSSPageSize', control page size and margins like so:

@page {
  size: A4;
  margin: 0 0 0 0;
}

Answer 2

After experimenting with django-wkhtmltopdf and weasyprint, I found that while weasyprint is more versatile when it comes to CSS, it still doesn't perfectly replicate the browser's rendering. The results were not satisfactory, especially when dealing with complex layouts.

For my specific requirement of creating a pixel-perfect 'certificate' PDF with an SVG background, puppeteer turned out to be the solution as it ensured compatibility with minimal modifications to the CSS. However, using puppeteer requires Node.js (which I was already using for asset compilation).

Puppeteer CLI:

npm i- puppeteer-pdf

Install the Django wrapper

pip install django-puppeteer-pdf

Include the Node puppeteer CLI start command in your settings:

PUPPETEER_PDF_CMD = 'npx puppeteer-pdf'

and create view:

from puppeteer_pdf import render_pdf_from_template
from django.http import HttpResponse, 
import os

# Rendering code 
context = {
    'data': 'test data'
}

output_temp_file = os.path.join(settings.BASE_DIR, 'static', 'temp.pdf')

pdf = render_pdf_from_template(
    input_template='path to template in templates dir'
    header_template='',
    footer_template='',
    context=context,
    cmd_options={
        'format': 'A4',
        'scale': '1',
        'marginTop': '0',
        'marginLeft': '0',
        'marginRight': '0',
        'marginBottom': '0',
        'printBackground': True,
        'preferCSSPageSize': True,
        'output': output_temp_file,
        'pageRanges': 1
    }
)
#you can remove temp file now or collecte them and run some crone task.(performance)
if os.path.exists(output_temp_file):
    os.remove(output_temp_file)
else:
    # raise error or something

filename = f'filename={'your donwload file name'}.pdf'

response = HttpResponse(pdf, content_type='application/pdf;')
response['Content-Disposition'] = filename

To preserve original colors, add this to your CSS:

html{
  -webkit-print-color-adjust: exact;
}

When using 'preferCSSPageSize', control page size and margins like so:

@page {
  size: A4;
  margin: 0 0 0 0;
}

Answer 3

Answer №2

Try using the whkhtmltopdf tool in Django for easy conversion of pure HTML to PDF.

Install django-wkhtmltopdf by running: pip install django-wkhtmltopdf

For more information, visit

Answer 4

Try using the whkhtmltopdf tool in Django for easy conversion of pure HTML to PDF.

Install django-wkhtmltopdf by running: pip install django-wkhtmltopdf

For more information, visit

Converting Django templates with HTML and CSS into downloadable PDF files

Answer №1

Answer №2

Similar questions

Struggling to get the Content Security Policy (CSP) to function properly within Next.js

Eliminate any HTML content using Jsoup while retaining the text lines

Tips for transitioning from an old link to a new link within an MVC framework

Why is it that filling a DataTable with a variable doesn't work, but when I input the same value into a PHP site and request it using AJAX, it suddenly works?

Below, the HTML contains my response API. I need to retrieve the value 355310 from this in order to set an environment variable in Postman

"the content does not occupy the entire space of the parent

Implementing setDoc with Firebase-Admin using Typescript in Firestore

Seasonal selection tool

Switching icons in a Vue framework when hovering over multiple elements

What is preventing me from specifying a specific position in my multi-dimensional array?

What could be causing ng-click to fail in dynamic HTML content?

Dygraphs.js failing to display the second data point

determine the quantity and categorize them

Attaching to directive parameters

Script function in Google Sheets HTML not being called

Oh no! It seems like the build script is missing in the NPM

Using CSS, replicate the language menu found on GitHub

Guide to generating a form field for each foreign key in a many-to-many connection within Django

The function parseFloat in Javascript can be used to subtract two numbers, returning an integer value

I am interested in utilizing Selenium to interact with a hyperlink within an HTML table