pdfkit不加载css和JavaScript

时间:2015-11-02 16:27:16

标签: javascript python css flask pdfkit

我目前正在使用Flask构建一个Web应用程序。我的主管要求一个功能应该是将当前页面保存为PDF(用于打印)。为此,我使用了pdfkit。在任何人建议使用weasyprint之前:我尝试安装它2个小时无济于事,所以我放弃了。我使用Bootstrap css及其JavaScript来使应用程序看起来更加愉快。

我使用以下文件结构(正如Flask教程所建议的那样)

+-- name_of_app
|   +-- static
|       +-- css
|           +-- css files
|       +-- js
|           +-- javascript files
|   +-- templates
|       +-- .html templates
|   +-- __init__.py
|   +-- config.py
|   +-- forms.py
|   +-- views.py
+-- run.py

要尝试pdfkit,我每次生成页面时都会生成PDF,即在views.py中路由的所有函数中生成PDF。所有页面都基于以下模板

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="static\css\bootstrap.css" rel="stylesheet" media="screen">
        <link href="static\css\bootstrap-theme.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="static\js\bootstrap.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {% if title %}
        <title>{{ title }} - Timeseries Project</title>
        {% else %}
        <title>Welcome to the Timeseries Project</title>
        {% endif %}
    </head>
    <body>
        <div class="navbar navbar-default">
            <div class="navbar-inner">
                <a class="navbar-brand active" href="/">Home</a>
                <a class="navbar-brand" href="/">Save as PDF</a>
            </div>
        </div>
        {% block content %}{% endblock %}
    </body>
</html>

使用提供的css和JS文件可以很好地加载网页。但是,pdfkit会输出以下警告

Warning: Failed to load file:///C:/Users/my_user/AppData/Local/Temp/static/css/bootstrap.css (ignore)
Warning: Failed to load file:///C:/Users/my_user/AppData/Local/Temp/static/css/bootstrap-theme.css (ignore)
Warning: Failed to load file:///C:/Users/my_user/AppData/Local/Temp/static/js/bootstrap.js (ignore)

我试图解决的问题是:如何让pdfkit在其中一个方法执行的文件夹中查找static(即views.py ),而不是AppData

2 个答案:

答案 0 :(得分:3)

要为静态文件生成网址,请使用特殊的'static'端点名称:http://flask.pocoo.org/docs/0.10/quickstart/#static-files

<link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel="stylesheet" >
<link href="{{ url_for('static', filename='css/bootstrap-theme.css') }}" rel="stylesheet">

答案 1 :(得分:0)

通过在pdfkit模板中包含完整路径,我可以使用jinja2使它起作用:

<link rel="stylesheet" href="file:///Users/paul/code/pdfmaker/templates/css/styles.css">