在 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

就像 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

希望对你有帮助。

Answer 2

你的意思是你的模板中有 JS，你渲染为 Weasyprint 的源？因为以这种方式使用的 JS 仅在客户端（如浏览器）上运行，而 Weasyprint 不会运行它，它不能。您必须向 Weasyprint 提供最终文档 (HTML)。

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