在Django模板中執行Javascript和css

Question

我在我的Django應用程序中通過Weasyprint將HTML導出為PDF。 我注意到，如果我將模板html發送到前端並將該html返回到后端以將其導出為pdf，則它會完美打印。 但是，如果我直接將模板html發送給Weasyprint，它會搞砸一切！ 沒有CSS，沒有JavaScript。

這就是我使用模板生成html的方式：

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

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

在我的JS控制器中，我將htmlContent分配給我的div：

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

然后我將生成的html返回給我的Django函數來打印pdf

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

這樣它就可以保持設計和一切。

但是當我將htmlContent直接發送給Weayprint而不將其發送到前端時，設計和着色就消失了！

在我的模板中，我甚至包含了CSS和Javascript文件，如下所示：

{% 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  %}

如何在Django模板中執行Javascript和CSS並導出為PDF而無需將其發送到前端？

Answer 1

你是否意味着你在模板中使用JS作為Weasyprint的源代碼？ 因為JS使用這種方式只在客戶端（如瀏覽器）運行而Weasyprint不會運行它，它不能。 您必須向Weasyprint提供最終文檔（HTML）。

如果您的PDF中存在CSS問題，那么您可能正在為Weasyprint使用不受支持的CSS功能。

Answer 2

就像mille_a所說，你不能將javascript代碼執行到pdf中。

因此，要解決您的問題，您需要在視圖中執行此操作：

# 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)

您可以查看此示例以獲取更多詳細信息： http ： //www.supinfo.com/articles/single/379-generate-pdf-files-out-of-html-templates-with-django

希望能幫助到你。