Wicked_pdf #2 : Des images, du style et du JS !
Suite de notre aventure avec wicked_pdf ! Après avoir vu comment mettre en place cet outil et générer notre premier PDF on va essayer d’ajouter du style (CSS) et des images à notre PDF.
1 - Un peu de style dans tout ça …
Souvenez-vous nous avions créé un layout spécifique pour nos fichiers PDFs. C’est dans ce layout (et non dans la vue du PDF) que l’on va appeler notre feuille de style :
# app/views/layouts/mon_layout_pdf.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Layout PDF</title>
<meta charset="utf-8" />
<span style="color: #ff0000;"><%= wicked_pdf_stylesheet_link_tag "pdf_styles" %></span>
</head>
<body>
<div id="header"></div>
<div class="principale">
<%= yield %>
</div>
</body>
</html>A noter qu’il existe également la méthode suivante pour appeler un script : <%= wicked_pdf_javascript_include_tag “mon_script_js” %>
/* app/assets/stylesheets/pdf_styles.css */
/* On définit ici tout le style specifique au PDF */
body {
font-family: Arial, helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
(...)
}On peut donc désormais styliser notre vue PDF comme n’importe quelle vue HTML !
2 – Insérons notre première image
Que ce soit pour insérer en entête ou dans le contenu même de notre PDF, il peut être souvent utile de manipuler les images. Wicked_pdf nous permet simplement de faire appel à une image stockée dans les assets de la manière suivante :
# image stockée dans app/assets/images/mon_image.jpg
<%= wicked_pdf_image_tag('mon_image.jpg', :size => "215x30") %>A noter qu’il est important que les images soient de bonne qualité (150 dpi offre un rendu optimal).
Et voilà maintenant on sait comment donner du style à notre PDF et lui ajouter des images. Notre troisième billet abordera de nombreux exemples de fonctionnalités de wicked_pdf (sauter une page, marges etc.).
Originally published at Sois-net.