【问题标题】:KnpSnappyBundle - wkhtmltopdf: CSS/images are loaded but not scriptsKnpSnappyBundle - wkhtmltopdf:加载 CSS/图像但不加载脚本
【发布时间】:2019-04-12 22:32:03
【问题描述】:

我从 HTML 生成的 PDF 的样式和图像加载良好,但脚本没有加载。

twig:
        debug: '%kernel.debug%'
        strict_variables: '%kernel.debug%'
        form_themes: ['bootstrap_4_horizontal_layout.html.twig']
        globals:
            pathToWeb: "%kernel.project_dir%/web"

knp_snappy:
    pdf:
        enabled:    true
        binary:     /usr/bin/wkhtmltopdf --javascript-delay 5000 --no-stop-slow-scripts --enable-javascript --debug-javascript --margin-top 0 --margin-bottom 0 --margin-left 0 --margin-right 0
        options:    []

DockerFile(wkhtmltopdf 0.12.3,带有补丁的 qt(我需要它作为页眉和页脚))

RUN apt-get install libssl1.0-dev -y
RUN cd ~
RUN wget https://github.com/wkhtmltopdf/wkhtmltopdf/releases/download/0.12.3/wkhtmltox-0.12.3_linux-generic-amd64.tar.xz
RUN tar vxf wkhtmltox-0.12.3_linux-generic-amd64.tar.xz 
RUN cp wkhtmltox/bin/wk* /usr/bin/

base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Meetings manager{% endblock %}</title>
        {% block stylesheets %}
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
            <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
            <link rel="stylesheet" href="{{ absolute_url(asset('css/navbar.css')) }}">
            <link rel="stylesheet" href="{{ absolute_url(asset('css/general.css')) }}">
        {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        {% block body %}{% endblock %}
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

然后扩展此模板并加载图像,例如:

<img style="width: 100%;" src="{{pathToWeb ~ asset('image/emargement_top.png') }}">

看起来javascript可以执行,如果我插入

<script>document.write("test");</script>

它可以工作,但其他脚本不行。

我试过了

    <script src="{{ absolute_url(asset('pdf/js/bootstrap.js')) }}"></script>
    <script src="{{ absolute_url(asset('pdf/js/jquery-3.3.1.js')) }}"></script>

    <script src="{{pathToWeb ~ asset('pdf/js/bootstrap.js')) }}"></script>
    <script src="{{pathToWeb ~ asset('pdf/js/jquery-3.3.1.js')) }}"></script>

它也不起作用(如您所见,我已将脚本的本地版本放在 web 文件夹中)

总结一下:

  • CSS 工作(自定义 css 和引导 css)
  • 图片作品
  • 可以执行Javascript
  • Jquery 和引导脚本未加载(引导网格不工作)

有什么想法吗?

【问题讨论】:

  • 您使用的是什么版本的引导程序?
  • 我正在使用 bootstrap 4,我知道 col 问题,您需要使用 .col-n 而不是 .col-xs-n,我会尝试使用 bootstrap 3,我我会回来stackoverflow.com/questions/19705880/…

标签: symfony wkhtmltopdf knp-snappy


【解决方案1】:

我看到您使用的是 bootstrap 4 (flexbox)。 wkhtmltopdf 稳定版 (0.12.x) 不支持此功能。欲了解更多信息see here。不幸的是,目前没有开发活动,因此可能需要很长时间才能得到支持。

还有一些不完整的替代品,比如 puppeteer(目前没有 TOC)。

【讨论】:

  • 它适用于 bootstrap 3 !我为此浪费了很多时间。但是有一点很奇怪,我之前安装的0.12.3.2(默认的)版本没有打过qt补丁。多亏了 xvfb,我运行了它,并且以这种方式生成了 bootstrap 4(但我没有页眉和页脚)
  • 如果您使用的是 toc,我建议安装 0.12.4 或 0.12.6-dev,如果您不需要它,则建议安装 0.12.5。对于这些版本,您不需要 xvfb。
猜你喜欢
  • 1970-01-01
  • 2017-02-14
  • 1970-01-01
  • 2018-12-13
  • 2015-10-24
  • 2013-05-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多