pdfkit 不加载 css 和 JavaScript答案

【问题标题】：pdfkit does not load css and JavaScriptpdfkit 不加载 css 和 JavaScript
【发布时间】：2015-11-02 16:27:16
【问题描述】：

我目前正在使用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中路由的所有函数中。所有页面均基于以下模板

<!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 在执行其方法之一的文件夹（即views.py）而不是AppData 中查找static ?

【问题讨论】：

由于应用程序的性质，是否不能选择仅打印样式表？
嗯，我不太清楚“仅打印样式表”是什么意思，您能详细说明一下吗？（我没有网络开发经验）
smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet
谢谢！试过rmn的回答后明天再看

标签： javascript python css flask pdfkit

【解决方案1】：

要为静态文件生成 URL，请使用特殊的 '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">

更新： 使用 _external=True 也可以通过提供绝对 URL 来解决问题。例如：

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

【讨论】：

哇，就这么简单，我要躺下哭了。非常感谢您的回答，明天我在办公室时会尝试一下并回复您
嗯，我尝试实现这一点，但是我现在收到相同的警告，但路径 Failed to load file:///static/css/bootstrap-theme.css
尝试使用绝对网址：url_for('static', filename='css/bootstrap.css', _external=True)
现在可以正确找到了，谢谢！但是，现在的问题是 pdfkit 不会保存文件...可能与它在本地托管有关...
这是解决方案，谢谢。还要放弃pdfkit，改用wkhtmltopdf-wrapper。

【解决方案2】：

通过在我的jinja2 模板中包含完整路径，我能够使用pdfkit 使其工作：

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

【讨论】：