Execute Javascript and css in Django template

Question

I am exporting HTML to PDF via Weasyprint in my Django app. I have noticed that if I send the template html to front end and return that html to backend to export it to pdf, it prints perfectly. But if I directly send template html to Weasyprint, it messes up everything! No css, no javascript.

This is how I'm using the template to generate html:

template = loader.get_template('Reporting/reportTemplate.html')
context = {
    "reportObj" : result[0]
}    

htmlContent = (template.render(context, request))
response['message'] = htmlContent
return JsonResponse(response)

In my JS controller I assign the htmlContent to my div:

$('#htmlContent').html(response.message);

Then I return the generated html back to my Django function to print pdf

HTML(string=htmlContent).write_pdf(target=response, stylesheets=[CSS(string=getCSS())])

This way it maintains the design and everything.

But when I send htmlContent directly to Weayprint without sending it to front end, the design and coloring is gone!

In my template, I even have included CSS and Javascript files like this:

{% load static %}
{% block content %}
 <link href="{% static "css/ion.rangeSlider.css" %}" rel="stylesheet">
 <link href="{% static "css/ion.rangeSlider.skinHTML5.css" %}" rel="stylesheet">
 <script type='text/javascript' src='{% static "scripts/ion.rangeSlider.js" %}'></script>

<script type='text/javascript'>
$(document).ready(function(){
    var creditScore = $("#creditScore").html();

    $("#rangeCS").ionRangeSlider({
        type: "double",
        min: 0,
        max: 1000,
        step: 100,
        from: 0,
        to: creditScore,
        from_fixed: true,
        to_fixed: true,
        grid: true,
        grid_snap: true
    });
});
</script>

 {% endblock  %}

How can I execute Javascript and CSS in Django template and export to PDF without having to send it to front end?

Maybe you can try to render the page internally. Some more info: stackoverflow.com/questions/126131/… — Marcs
– Marcs, Commented Oct 6, 2016 at 10:32

mille_a · Accepted Answer · 2016-10-06 10:26:26Z

1

Are you meaning you've JS in the template that you render as source for Weasyprint ? Because JS used that way runs only on a client side (like browsers) and Weasyprint won't run it, it cannot. You must provided the final document (HTML) to Weasyprint.

If you've CSS issues in your PDF, so maybe you're using unsupported CSS features for Weasyprint.

answered Oct 6, 2016 at 10:26

mille_a

1218 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tahreem Iqbal Over a year ago

I'm using rangeSlider in my template to display a certain kind of data. Is there a way to execute the Javascript before sending it to weasyprint, without having to send it to browser?

Willemoes Over a year ago

I think you need a way to execute javascript engine where your django app is running. You can use something like jeanphix.me/Ghost.py or Selenium+Phantom webdriver to run the site and generate the content

Bloodbee · Accepted Answer · 2016-10-06 10:46:29Z

1

Like mille_a said, you can't execute javascript code into a pdf.

So to resolve your problem you need to do it into your view :

# do some python stuff to get somes datas 
datas = ...

# assign it into your html
htmlContent = my_html_template.render(datas)

# call the pdf generation
HTML(string=htmlContent).write_pdf(target=response)

You can see this example for more details : http://www.supinfo.com/articles/single/379-generate-pdf-files-out-of-html-templates-with-django

Hope it helps.

answered Oct 6, 2016 at 10:46

Bloodbee

9558 silver badges23 bronze badges

Collectives™ on Stack Overflow

Execute Javascript and css in Django template

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related