WkHTMLtoPDF not loading local CSS and images

不羁的心 提交于 2019-11-30 05:41:12

If your are on linux check the ownership of your images. For windows you will find some info on http://code.google.com/p/wkhtmltopdf/wiki/Usage.

I tried different kind of paths to the image:

  1. <img src="file:///var/www/testpdf/flowers.jpg"><br>
  2. <img src="./flowers.jpg"><br>
  3. <img src="flowers.jpg"><br>
  4. <img src="/var/www/testpdf/flowers.jpg"><br>

all images are showed correct. I didn't use any command line arguments (only wkhtmltopdf /var/www/testpdf/makepdf.html makepdf.pdf)

In my case - wkhtmltopdf version 0.12.2.1 (with patched qt) - adding a base tag to the head section with the absolute path made sure images and css did get loaded.

<html>
<head>
...
<base href="http://www.example.com/">
<link href="/assets/css/style.css" rel="stylesheet">
...
</head>
vladimir

For Windows you need to use absolute file system paths in your markup. For instance:

<link href='C:\Projects\Hello\Hello.Web\Content\custom\home.css' rel='stylesheet' type='text/css' />

! not http://localhost/Hello.Web/Content/custom/home.css

on Windows use path: file:///C:/some/dir/some/file.img (notice the tripple /)

I know this is quite old topic, but I've just faced the same issue and maybe it will help to someone.
I tried different approaches, like css background image and using string as base64 encoded data image. Sometimes it helped, sometimes not - no particular rule I could found.
It turned out that upgrading library wkhtmltopdf solved the problem. I was using version 0.12.0 and upgraded to 0.12.3

After taking in everyone's kind assistance from here and around the net, I discovered something that worked for me - coding in asp.net (c#).

I needed to access the image by url (not file path), as the original source html still needed to be accessed. Through troubleshooting, I discovered these points.

  1. These flags had to be passed in to the command line process: "-q -n --disable-smart-shrinking --images --page-size A4"

  2. URL still has to be absolute.

  3. Image must be a jpg! I was originally trying to do a gif, to no avail.

  4. I discovered adding "--enable-local-file-access" didn't help, as it requires '\' slashes in the image path instead of '/' slashes, which doesn't help if you also hope to use the source html (in some browsers). Also, if you need to access the local file system, you need to provide an absolute path, as it reads straight from the root and goes from there.

Hope this helps others.

Cheers

-y

You can insert base64 encoded images like :

<img src=data:image/png;base64,someBase64content"/>
For me the problem was resolved by doing two things: 1: In your app/config/config.yml
- Under the knp_snappy
- For the option temporary_folder write ./
- i.e: temporary_folder: ./
2: Now in your html.twig pages remove the asset and write:
From:
 <link rel="stylesheet" type="text/css" href="{{ asset('css/default_template.css') }}">
To:
 <link rel="stylesheet" type="text/css" href="css/default_template.css">

And after that, it worked for me.

Hopefully i've helped somebody. Thank you !

This is probably due to SE Linux or firewall rules that prevent you from going out on the internet and back to your own server. You can update your host file to point calls to your domain back to your machine's home address.

When a browser renders your HTML, it uses a relative path (sometimes with a URL at the beginning of it) like this:

<img src="/static/images/some_picture.png">
<img src="http://www.example.com/static/images/some_picture.png">

But when WkHTMLtoPDF is running on your server, it's interfacing with your local files directly through the filesystem, not through a web server. So for local files, unlike a browser, WkHTMLtoPDF wants the actual filepath:

<img src="/var/www/myapplication/static/images/some_picture.png">

(This worked for me with Python Flask)

To generate your pdf with your images or styles you need to provide the server path as follows:

<img src="https://upload.wikimedia.org/wikipedia/...image.png" />

<link href="http://localhost:8080/css/file.css" media="all" rel="stylesheet" type="text/css" />

Note this second link, it's the local address to your stylesheet, or could be a remote like the first link. The file path didn't work for me, only the server path to the resource.

Ps: In my situation, I am using spring boot in Intellij IDE and I needed to invalidate cache of IDE and not run in debug mode in order to work, otherwise it may be not update things.

URL of images must be absolute not relative. Check this working example in a twig template:

<img src="{{ absolute_url(asset('images/example.png')) }}"/>
pelon

Just spent a few days on getting a Flask/ Blueprint /static file/ css to be read by wkhtmltopdf, so I thought I'd share what I learned. Win 7, Flask 0.12 on Python 3.4.4, using Pycharm pro, latest pdfkit and wkhtmltopdf.

  1. download the wkhtmltopdf here

  2. install it -mine installed on:

    C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe

  3. right after you import pdfkit into your flask routes.py script ,insert the lines:

    path_wkthmltopdf = r'C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe'

    config = pdfkit.configuration(wkhtmltopdf=path_wkthmltopdf)

(note the "r" in the first line here !! )

  1. when you use pdfkit in a route, add ",configuration = config" as an argument, eg:

    pdfkit.from_string(html_text, output_filename, configuration = config)

this tells pdfkit where to look for wkhtmltopdf. Yes, you need to do this.

  1. NOW in your flask BASE TEMPLATE add , _external = True to your css route, eg:

(this will keep wkhtmltopdf from throwing error cant find css)

  1. NOW (serious bootstrap template juju warning): go into your flask /external libraries /site-packages /flask_bootstrap /templates /base.html template and:

a. fix CSS link:

<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet" media="screen">

add "http:" so it looks like:

<link href="http:{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet" media="screen">

b. fix JS links:

add "http:" so the JS links look like:

<script src="http:{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>

<script src="http:{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>

and with all this

your flask html to pdf conversion

using pdfkit and wkhtmltopdf

should run without errors.

note: I moved to flask from PHP and if you are a flask-er, please post your solutions up here. The flask community is MUCH smaller than the PHP community so we all have to pitch in.

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!