KnpSnappyBundle - wkhtmltopdf: CSS/ изображения загружены, но не скрипты

Стиль и изображения для моего сгенерированного PDF из HTML хорошо загружены, но не скрипты.

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>

Это также не работает (я поместил локальную версию скриптов в веб-папку, как вы можете видеть)

В поддон до:

  • CSS работает (пользовательские CSS и начальной загрузки CSS)
  • Образы работ
  • Javascript может быть выполнен
  • Jquery и скрипты начальной загрузки не загружаются (сетка начальной загрузки не работает)

Есть идеи?

Источник

1 ответ

Решение

Я вижу, что вы используете bootstrap 4 (flexbox). Это не поддерживается в стабильной версии wkhtmltopdf (0.12.x). Для получения дополнительной информации см. Здесь. К сожалению, в настоящее время не ведется разработка, поэтому может пройти много времени, пока она не будет поддержана.

Есть несколько незавершенных альтернатив, таких как кукловод (на данный момент не имеет TOC).

Источник
Другие вопросы по тегам