Avoir l’inspecteur web d’un smartphone sur son PC / Mac

  • Brancher le smartphone au pc avec un câble usb
  • Activer l’inspecteur web sur le device
    • Sur iOs :
      • Aller dans Réglages
      • Puis dans Safari
      • Puis dans Avancé
      • Et activer l’inspecteur web
    • Sur Android :
      • Aller dans Paramètres
      • Puis dans À propos du téléphone (tout en bas)
      • Cliquer plusieurs fois sur Numéro de build jusqu’à « être développeur »
      • Retour dans Paramètres
      • Dans Options développeurs
      • Activer le Débogage usb
  • Accéder à l’inspecteur
    • Pour iOs :
      • Ouvrir Safari
      • Dans l’onglet développement
      • Choisir le device et l’onglet concerné
    • Pour Android :
      • Ouvrir Chrome
      • Ouvrir l’inspecteur Web (Chrome DevTools)
      • Dans les options du Chrome DevTools
      • Cliquer sur More Tools
      • Remote devices
      • Choisir son device et accepter la demande d’autorisation sur le device
      • Cliquer sur le Inspect de l’onglet désiré

Wicked_pdf #4 : Un beau header, des marges et des numéros

De retour sur notre « wicked_pdf’s road-trip » avec la personnalisation du header et du footer, la numérotation de nos pages, un petit mode « debug » et des marges sur mesures !

1 – Un header et un footer

Le header et le footer se gèrent de la même manière, cependant il existe plusieurs techniques pour les afficher. Soit c’est un simple texte et on peut le faire dans le controller, soit on souhaite apporter du style et des images et là il faut passer par un template spécifique. Nous allons voir comment ajouter un footer mais c’est exactement la même chose pour le header.

On spécifie un fichier pour notre header dans lequel nous allons pouvoir insérer le contenu que l’on souhaite. Ce fichier est placé dans app/views/mon_objet/pdf_header.pdf.erb.

2 – Des numéros pour nos pages

Très souvent utile sur les documents avec plusieurs pages : la possibilité d’indiquer le numéro. Plusieurs méthodes existent, une manière très simple de le faire depuis le controller :

Les termes [page] et [topage] sont à utiliser, libre à vous de formater le rendu final comme vous le voulez (dans notre exemple cela donne en bas de page : Page 2 / 4 par ex). Possibilité également de le centrer (:center) ou de le mettre à gauche ou à droite (:left, :right).

3 – Un mode debug ?

Concevoir un PDF via du code HTML c’est très pratique, mais quand on remarque une anomalie sur un PDF on ne peut pas « inspecter l’élément » comme sur nos pages web. Petite astuce, toujours dans votre controller :

Pour l’utiliser il suffit, dans votre url, de rajouter  » ?debug=true  » à la fin de cette manière http://localhost:3000/mon_objet/show.pdf?debug=true

Attention toutefois ce mode debug passe en mode html et n’affiche pas exactement la même chose que le rendu PDF (mais trouve son utilité dans certains cas).

4 – La gestion des marges

Wicked_pdf gère les marges par défaut (à 10) mais vous pouvez les personnaliser dans le controller :

Attention toutefois à bien différencier l’impression (Fichier > Imprimer) depuis le navigateur de l’impression du fichier PDF enregistré sur votre ordinateur, au niveau des marges ça n’a rien à voir.

La liste complète des options est disponible ici même, nous essaierons d’en aborder d’autre. La prochaine fois on se penchera du côté des PDFs en pièces jointes dans les mails et de la génération de PDF à la volée !