The style and the images for my generated PDF from HTML are well loaded but not the scripts.
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 with patched qt (I need it for headers and footers))
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>
This template is then extended and images are then loaded, for example:
<img style="width: 100%;" src="{{pathToWeb ~ asset('image/emargement_top.png') }}">
It looks like javascript can be executed, If I insert
<script>document.write("test");</script>
It works, but not the other scripts.
I tried
<script src="{{ absolute_url(asset('pdf/js/bootstrap.js')) }}"></script>
<script src="{{ absolute_url(asset('pdf/js/jquery-3.3.1.js')) }}"></script>
and
<script src="{{pathToWeb ~ asset('pdf/js/bootstrap.js')) }}"></script>
<script src="{{pathToWeb ~ asset('pdf/js/jquery-3.3.1.js')) }}"></script>
It doesn't work either (I have put a local version of the scripts in the web folder as you can see)
To sump up:
- CSS works (custom css and bootstrap css)
- Images works
- Javascript can be executed
- Jquery and bootstrap scripts are not loaded (the bootstrap grid is not working)
Any ideas ?
I see you're using bootstrap 4 (flexbox). This is not supported in wkhtmltopdf stable version (0.12.x). For further information see here. Unfortunately there is no development activity at the moment, so it can take a long time until this will be supported.
There are some not complete alternatives like puppeteer (doesn't have TOC at the moment).