web-dev-qa-db-fra.com

WkHTMLtoPDF ne charge pas les images CSS et CSS locales

J'ai vu plusieurs questions qui sont très similaires à celle-ci, j'ai donc hésité au début à le poster. Mais rien n'a suggéré de résoudre mon problème et je n'arrive pas à comprendre ce qui ne va pas moi-même.

Pour un projet que j'ai réalisé pour un client, ils souhaitaient pouvoir convertir en PDF des devis pour leurs clients (générés à l'aide d'un formulaire en ligne). Assez simple. Comme tout le projet était en PHP, j'ai utilisé le processus simple suivant:

  1. Enregistrer la citation en tant que fichier HTML temporaire
  2. Utilisez WkHTMLtoPDF pour convertir le fichier HTML en PDF
  3. Produisez ce fichier PDF
  4. Nettoyer (supprimer les fichiers temporaires)

Cela a fonctionné jusqu'à ce qu'ils changent de serveur. Le nouveau serveur dispose d'un pare-feu.

Au début, l'étape de conversion PDF renvoyait une page de pare-feu indiquant que le serveur ne pouvait pas établir de connexions sortantes. Pour résoudre ce problème, j'ai alimenté le fichier HTML directement au lieu de créer un lien (/var/www/mysite/temp/18382.html au lieu de www.example.com/temp/18382.html). Cela convertissait le code HTML, mais le pare-feu empêchait le chargement de CSS et d'images.

Je peux surmonter le CSS en l'intégrant simplement directement dans le site au lieu de créer un lien (en utilisant les balises <style>), mais cela ne fonctionne pas pour les images

J'ai d'abord essayé d'utiliser des liens relatifs. J'ai changé <img src="http://www.example.com/temp/image.jpg" /> en <img src="./image.jpg" />. Cela n'a pas fonctionné.

Ensuite, j'ai essayé <img src="file:///var/www/mysite/temp/image.jpg" /> mais cela n'a pas fonctionné

J'ai lu et parcouru le manuel WkHTMLtoPDF et j'ai essayé plusieurs arguments en ligne de commande tels que --enable-local-file-access, --enable /var/www/mysite/temp/ et --images mais rien ne semble pouvoir y remédier.

27
stevendesu

Si vous êtes sur Linux, vérifiez la propriété de vos images. Pour Windows, vous trouverez des informations sur http://code.google.com/p/wkhtmltopdf/wiki/Usage

J'ai essayé différents types de chemins vers l'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> 

toutes les images sont montrées correctes. Je n'ai utilisé aucun argument de ligne de commande (Seulement wkhtmltopdf /var/www/testpdf/makepdf.html makepdf.pdf)

21
Bass Jobsen

Dans mon cas - wkhtmltopdf version 0.12.2.1 (avec qt corrigé) - l’ajout d’une balise de base à la section head avec le chemin absolu s’assurait que les images et les fichiers css étaient chargés.

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

Pour Windows, vous devez utiliser des chemins de système de fichiers absolus dans votre balisage. Par exemple:

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

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

11
vladimirG

sur le chemin d’utilisation Windows: file:///C:/some/dir/some/file.img (remarquez le triple /)

4
paranoiq

Je sais que c'est un sujet assez ancien, mais je viens de faire face au même problème et peut-être que cela aidera quelqu'un.
J'ai essayé différentes approches, comme une image de fond css et l'utilisation d'une chaîne en tant qu'image de données codée en base64. Parfois cela aidait, parfois pas - aucune règle particulière que je pouvais trouver .
Il s’est avéré que la mise à niveau de la bibliothèque wkhtmltopdf a résolu le problème . J'utilisais la version 0.12.0 et je suis passée à la version 0.12.3.

3
wladimirec

Après avoir recueilli l'aide de tout le monde d'ici et du réseau, j'ai découvert quelque chose qui fonctionnait pour moi: coder en asp.net (c #).

J'avais besoin d'accéder à l'image par URL (pas le chemin du fichier), car le code source HTML d'origine devait encore être consulté. Grâce au dépannage, j'ai découvert ces points.

  1. Ces drapeaux ont dû être transmis au processus de ligne de commande: "- q -n --disable-smart-shrinking --images --page-size A4"

  2. L'URL doit encore être absolue.

  3. L'image doit être un jpg! J'essayais à l'origine de faire un gif, en vain.

  4. J'ai découvert que l'ajout de "--enable-local-file-access" n'a pas aidé, car il nécessite des barres obliques "\" dans le chemin de l'image au lieu de "/", ce qui n'aide pas si vous souhaitez également utiliser le code source html (dans certains navigateurs). De plus, si vous devez accéder au système de fichiers local, vous devez fournir un chemin absolu, car il se lit directement à partir de la racine et partant de là.

J'espère que cela aide les autres.

À votre santé

-y

2
Yves

Ceci est probablement dû à SE Linux ou aux règles de pare-feu qui vous empêchent de sortir sur Internet et de revenir sur votre propre serveur. Vous pouvez mettre à jour votre fichier hôte pour rediriger les appels de votre domaine vers l'adresse de votre ordinateur.

1
E W

Vous pouvez insérer des images codées en base64 comme:

<img src=data:image/png;base64,someBase64content"/>
1
YemM

Lorsqu'un navigateur affiche votre code HTML, il utilise un chemin relatif (parfois avec une URL au début) comme suit:

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

Mais lorsque WkHTMLtoPDF est exécuté sur votre serveur, il s’interface directement avec vos fichiers locaux via le système de fichiers, not via un serveur Web. Donc, pour les fichiers locaux, contrairement à un navigateur, WkHTMLtoPDF veut le chemin du fichier :

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

(Cela a fonctionné pour moi avec une fiole de Python)

0
Josh

Je viens de passer quelques jours à faire lire un fichier Flask/Blueprint/static/css par wkhtmltopdf, alors j’ai pensé partager ce que j’ai appris . Win 7, Flask 0.12 sur Python 3.4.4, avec Pycharm pro, les derniers pdfkit et wkhtmltopdf.

  1. téléchargez le fichier wkhtmltopdf à partir de http://wkhtmltopdf.org/downloads.html

  2. installer it -mine installé sur:

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

  3. juste après avoir importé pdfkit dans votre script flask routes.py, insérez les lignes suivantes:

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

    config = pdfkit.configuration (wkhtmltopdf = path_wkthmltopdf)

(notez le "r" dans la première ligne ici !!)

  1. lorsque vous utilisez pdfkit dans une route, ajoutez ", configuration = config" en tant qu'argument, par exemple:

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

cela indique à pdfkit où chercher wkhtmltopdf. Oui, vous devez faire cela. 

  1. MAINTENANT dans votre ballon BASE TEMPLATE, ajoutez ", _external = True" à votre route CSS, par exemple:

(cela empêchera wkhtmltopdf de lancer une erreur et de ne pas trouver le css)

  1. MAINTENANT (avertissement relatif au modèle d'amorçage grave): Dans votre flacon/bibliothèques externes/site-packages/flask_bootstrap/templates/base.html et:

une. correction du lien CSS:

ajoutez "http:" afin qu'il ressemble à:

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

b. réparer les liens JS:

ajoutez "http:" pour que les liens JS ressemblent à:

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

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

et avec tout ça

votre conversion html en pdf 

en utilisant pdfkit et wkhtmltopdf

devrait fonctionner sans erreur.

remarque: je suis passé de PHP au flacon et si vous êtes un flasque, publiez vos solutions ici. La communauté des flacons est BEAUCOUP plus petite que la communauté PHP. Nous devons donc tous apporter notre contribution. 

0
pelon