Trouble with xhtml2pdf failing to render CSS when converting HTML to PDF

Question

Trouble with xhtml2pdf failing to render CSS when converting HTML to PDF

Conversion:

html = template.render(context)
resultFile = open(filepath, "w+b")
pdf = pisa.CreatePDF(html.encode('utf-8'), dest=resultFile,encoding='utf-8', link_callback=link_callback)

link_callback

def link_callback(uri, rel):
    sUrl = settings.STATIC_URL      # Usually /static/
    sRoot = settings.STATIC_ROOT    
    mUrl = settings.MEDIA_URL       # Usually /static/media/
    mRoot = settings.MEDIA_ROOT     # Typically /home/userX/project_static/media/

    # Convert URIs to absolute system paths
    if uri.startswith(mUrl):
        path = os.path.join(mRoot, uri.replace(mUrl, ""))
    elif uri.startswith(sUrl):
        path = os.path.join(sRoot, uri.replace(sUrl, ""))
    else:
        return uri  # handle absolute uri (ie: http://some.tld/foo.png)

    # Ensure that file exists
    if not os.path.isfile(path):
        raise Exception(
            'media URI must start with %s or %s' % (sUrl, mUrl)
        )
    return path

I successfully generated a pdf using xhtml2pdf. The file was created, but unfortunately, the css styles are not being applied correctly. I verified the path returned from link_callback and it is accurate, however, the pdf does not display any css styling.

css:

#page_1 {position:relative; overflow: hidden;margin: 64px 0px 65px 0px;padding: 0px;border: none;}

#page_1 #p1dimg1 {position:absolute;top:0px;left:20%;z-index:-1;width:600px;height:870px;}
#page_1 #p1dimg1 #p1img1 {width:600px;height:870px;}

#page_2 {position:relative; overflow: hidden;padding-left: 100px;border: none;height: 854px;}

#page_2 #p2dimg1 {position:absolute;left:27%;z-index:-1;width:490px;height:669px;}
#page_2 #p2dimg1 #p2img1 {width:490px;height:669px;}

The css path obtained: /Users/mypc/project/project/static/css/lender_borrower.css

html css django html2pdf xhtml2pdf

Answer 1

Answer №1

If you're using xhtml2pdf, remember that external stylesheets cannot be linked to.

To style your PDF document, you'll need to include an internal style sheet within the HTML template itself. This means placing your CSS styles between the

<style type="text/css"></style>

tags in the head section.

It's important to note that not all CSS properties are supported by xhtml2pdf. Refer to the documentation for a list of supported CSS properties.

Here is a sample template structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Your Title Here</title>
  <style type="text/css">

  # PLACE YOUR CSS STYLES HERE

  </style>
</head>
<body>

# Your content goes here

</body>
</html>

Answer 2

If you're using xhtml2pdf, remember that external stylesheets cannot be linked to.

To style your PDF document, you'll need to include an internal style sheet within the HTML template itself. This means placing your CSS styles between the

<style type="text/css"></style>

tags in the head section.

It's important to note that not all CSS properties are supported by xhtml2pdf. Refer to the documentation for a list of supported CSS properties.

Here is a sample template structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Your Title Here</title>
  <style type="text/css">

  # PLACE YOUR CSS STYLES HERE

  </style>
</head>
<body>

# Your content goes here

</body>
</html>

Answer 3

Answer №2

When it comes to loading images, backgrounds, and stylesheets from an HTML document in xhtml2pdf, the default expectation is that these files are located on the local drive. However, there are instances where a programmer may need to load these resources from different sources such as via HTTP requests from the Internet or even from a database. In order to facilitate this, a link_callback can be defined to handle such requests.

The documentation suggests that external style sheets can indeed be added using the link_callback function, although the process of doing so is unclear to me. Is there anyone who can provide assistance with this? Specifically, I am looking for guidance on how to load static files in Django.

Answer 4

When it comes to loading images, backgrounds, and stylesheets from an HTML document in xhtml2pdf, the default expectation is that these files are located on the local drive. However, there are instances where a programmer may need to load these resources from different sources such as via HTTP requests from the Internet or even from a database. In order to facilitate this, a link_callback can be defined to handle such requests.

The documentation suggests that external style sheets can indeed be added using the link_callback function, although the process of doing so is unclear to me. Is there anyone who can provide assistance with this? Specifically, I am looking for guidance on how to load static files in Django.

Answer 5

Answer №3

By the year 2024, it is possible to integrate an external stylesheet by following this method:

Example input file:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Assurance Report</title>
    <link rel="stylesheet" type="text/css" href="Styles\assuranceReport.css" />
</head>
<body>
...

Python scripting (for Windows):

from xhtml2pdf import pisa

with open('Docs\\assuranceReport.html', 'r') as input_file:
    source_html = input_file.read()
    result_file = open("My.pdf", "w+b")

    pisa_status = pisa.CreatePDF(
                source_html,
                #default_css - no need for anything here
                dest=result_file)

        result_file.close()
        # return False on success and True on errors
        return pisa_status.err

An important note is that the CSS file must be saved in UTF-8 format rather than UTF-8-BOM to avoid parsing issues with xhtml2pdf:

https://i.sstatic.net/larbR.png

Answer 6

By the year 2024, it is possible to integrate an external stylesheet by following this method:

Example input file:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Assurance Report</title>
    <link rel="stylesheet" type="text/css" href="Styles\assuranceReport.css" />
</head>
<body>
...

Python scripting (for Windows):

from xhtml2pdf import pisa

with open('Docs\\assuranceReport.html', 'r') as input_file:
    source_html = input_file.read()
    result_file = open("My.pdf", "w+b")

    pisa_status = pisa.CreatePDF(
                source_html,
                #default_css - no need for anything here
                dest=result_file)

        result_file.close()
        # return False on success and True on errors
        return pisa_status.err

An important note is that the CSS file must be saved in UTF-8 format rather than UTF-8-BOM to avoid parsing issues with xhtml2pdf:

https://i.sstatic.net/larbR.png

Trouble with xhtml2pdf failing to render CSS when converting HTML to PDF

Answer №1

Answer №2

Answer №3

Similar questions

Achieving a consistent fixed width for tbody even when scrollbar is present

What are some strategies for creating a smooth transition with a max-height of 0 for a single-line div?

Where are Temporary files stored in the Google Chrome extension?

Tips on storing the amount of time a user devotes to answering questions on my form into a database

Tips on how to maintain the value of an integer variable even after clicking a submit button, enabling its reuse on the same page

Unable to remove Css class through code behind

How can the 'One' table be made optional in a One-to-Many relationship within Django?

Creating a dynamic workspace with a portable viewing window

Leveraging Font Awesome and Material Icons within ngFor in Angular 2

Unable to view image when using material-ui CardMedia component

Hover causing opacity problem in CSS

Tips for avoiding the display of concealed forms on a webpage

New jQuery div elements do not have animations when using $(document).on

Showing videos on Django Template: Link to Media

Getting started with a Django app is simple and straightforward. Ready to

Explore the Filter List without being affected by the arrangement of words or the level of search precision

A guide on updating a boolean field in the database using ajax

Troubles with Flex wrap in CSS3 on iOS 10.3.2 browsers (Chrome and Safari)

Creating a moving background for a loading bar with HTML5 and Shadow DOM is currently underway

ng-click event not firing after $compile in AngularJS