Impression et PDF

Au-delà des formats d'impression classiques, Dokos offre plusieurs fonctionnalités d'édition avancées : l'ajout de pages de couverture en première et dernière page d'un PDF, la génération de courriers formatés avec en-tête, et la personnalisation du style visuel des impressions grâce à un champ CSS dédié. Ces outils permettent de produire des documents professionnels sans sortir de Dokos.

Pages de couverture PDF

Exemple — Cabinet Veraison Le cabinet Veraison envoie ses propositions commerciales en PDF. Il a configuré une page de couverture avec le logo du cabinet et une page de quatrième de couverture avec les mentions légales. Chaque devis généré depuis Dokos inclut automatiquement ces deux pages, sans manipulation manuelle dans un éditeur PDF externe.

Un format d'impression dans Dokos peut être associé à une page de couverture en début de document et à une page de quatrième de couverture en fin de document. Chaque page de couverture est un fichier PDF préalablement téléchargé dans Dokos et configuré depuis le formulaire Page de couverture.

Une fois les pages de couverture rattachées à un format d'impression, elles s'ajoutent automatiquement à chaque génération PDF — que ce soit depuis le bouton Imprimer, lors d'un envoi par email, ou par le biais d'une automatisation.

Configuration

Courriers formatés en PDF

Exemple — Tribu SCOP L'équipe de Tribu SCOP rédige un courrier d'accompagnement pour un appel d'offres directement dans Dokos, sélectionne l'en-tête de la société et génère un PDF prêt à l'envoi en un clic, sans passer par un traitement de texte.

Dokos permet de générer un courrier en PDF à partir d'un contenu HTML et d'un en-tête de lettre existant. Le résultat est un document PDF mis en page avec les coordonnées et le logo de la société, téléchargeable immédiatement ou joint automatiquement à un document.

Cette fonctionnalité est disponible depuis les contextes qui proposent la génération de courriers — par exemple lors de l'envoi d'une communication formelle associée à un dossier.

CSS personnalisé sur l'en-tête de lettre

Exemple — Maison Verte SARL Maison Verte SARL souhaite que ses factures imprimées affichent le nom du client en vert et utilisent une police spécifique pour les titres. L'équipe administrative saisit directement les règles CSS dans le champ prévu sur l'en-tête de lettre, sans toucher au HTML ni faire appel à un développeur.

L'en-tête de lettre dispose d'un champ CSS personnalisé dédié. Les règles de style saisies dans ce champ sont automatiquement appliquées lors de l'impression d'un document (format d'impression) et lors de la génération de rapports associés à cet en-tête.

Ce champ remplace l'ancienne pratique qui consistait à glisser des balises <style> à l'intérieur des champs HTML de l'en-tête — une méthode qui posait des problèmes de sécurité et de maintenabilité.

Ce que vous pouvez faire

• Modifier la typographie (police, taille, couleur) des éléments de vos impressions
• Ajuster les marges, espacements et bordures
• Appliquer un style différent selon l'en-tête de lettre utilisé (ex. : une charte graphique par entité juridique)
• Cibler précisément les zones du document imprimé grâce aux sélecteurs CSS standards

Comment configurer le CSS

1. Ouvrir la liste En-tête de lettre (Letterhead) depuis Paramètres > Impression.
2. Sélectionner l'en-tête de lettre à personnaliser ou en créer un nouveau.
3. Faire défiler jusqu'à la section CSS personnalisé.
4. Saisir les règles CSS dans le champ dédié (exemple ci-dessous).
5. Enregistrer, puis générer un aperçu d'impression pour vérifier le rendu.

/* Exemple : couleur de l'en-tête de tableau et police globale */
body {
  font-family: 'Arial', sans-serif;
  font-size: 12px;
}
th {
  background-color: #2e7d32;
  color: #ffffff;
}
.print-heading {
  font-size: 18px;
  font-weight: bold;
}

Bon à savoir : le CSS saisi ici s'applique à toutes les impressions utilisant cet en-tête de lettre, qu'il s'agisse d'un document (facture, devis, bon de commande…) ou d'un rapport imprimé.

Constructeur de format d'impression

Exemple — Bureau Moderne Le responsable administratif de Bureau Moderne souhaite créer un format de bon de commande avec le logo en en-tête, les colonnes articles à gauche et le total à droite. Il ouvre le constructeur, glisse les champs dans les sections, ajuste l'alignement des colonnes depuis l'onglet latéral et enregistre avec Ctrl+S — sans écrire une seule ligne de HTML.

Le constructeur de format d'impression (Print Format Builder) est un éditeur visuel intégré à Dokos qui permet de créer et modifier des formats d'impression sans connaissance technique. Il est accessible depuis le formulaire d'un Format d'impression en activant le mode constructeur.

Constructeur moderne et constructeur classique

Dokos propose désormais deux modes de construction :

Le constructeur moderne est le mode par défaut pour toute nouvelle création. Il produit des PDF avec répétition de l'en-tête sur chaque page, gestion précise des sauts de ligne dans les tableaux, et rendu fidèle au navigateur.

Le constructeur classique reste accessible uniquement pour éditer des formats existants créés avec l'ancienne interface. Si vous ouvrez la route /print-format-builder-classic sans sélectionner de document, vous êtes automatiquement redirigé vers le constructeur moderne.

      
flowchart TD
    A[Nouveau Format d'impression] --> B{Format existant ?}
    B -- Non --> C[Constructeur moderne\npar défaut]
    B -- Oui --> D{Créé avec\nl'ancien outil ?}
    D -- Non --> C
    D -- Oui --> E[Constructeur classique\npour l'édition]
    C --> F[PDF généré via Chrome]
    E --> G[PDF généré via le\nmoteur configuré]

    

Interface générale

L'interface se compose de quatre zones principales :

• La barre latérale gauche à onglets — organisée en plusieurs onglets pour accéder rapidement aux différentes catégories d'éléments :
  • Champs — liste tous les champs disponibles du document, avec leur type affiché sous forme de badge. Un clic ou un glisser-déposer ajoute le champ dans le canevas.
  • Blocs — sections, colonnes, sauts de page et autres éléments de mise en page.
  • Modèles — blocs préconfigurés réutilisables pour accélérer la construction.
• La zone centrale (canevas) — aperçu du document en cours de construction, avec les sections et colonnes déplaçables par glisser-déposer. Un contrôle de zoom permet d'agrandir ou réduire l'affichage du canevas pour travailler plus confortablement sur les détails.
• Le panneau inspecteur (droite) — paramètres contextuels qui s'adaptent à l'élément sélectionné : style de la section, configuration de l'en-tête de lettre, options du champ actif.

Zones d'en-tête, corps et pied de page

Le canevas est divisé en trois zones distinctes, clairement délimitées par des séparateurs visuels :

• En-tête (Header) — contenu répété en haut de chaque page du PDF (logo, coordonnées…)
• Corps (Body) — contenu principal du document
• Pied de page (Footer) — contenu répété en bas de chaque page

Chaque section affiche un badge indiquant à quelle zone elle appartient. Vous pouvez faire glisser les sections d'une zone à une autre directement dans le canevas.

Ajouter et organiser des sections

Les sections structurent votre format d'impression. Chaque section peut contenir une ou plusieurs colonnes.

Ajouter une section :

• Survolez l'espace entre deux sections existantes : un bouton + apparaît. Cliquez dessus pour insérer une nouvelle section à cet emplacement précis.

Déplacer une section :

• Utilisez la poignée de déplacement située sur le côté droit de la section pour la faire glisser vers un autre emplacement dans le canevas — y compris entre les zones en-tête, corps et pied de page.

Configurer une section : Cliquez sur une section pour la sélectionner (un contour bleu l'encadre). Le panneau inspecteur à droite affiche ses paramètres, organisés en onglets :

Navigation rapide : lorsqu'un champ est sélectionné à l'intérieur d'une section, un fil d'Ariane s'affiche en haut du panneau inspecteur. Cliquez dessus ou appuyez sur Échap pour remonter à la sélection de la section parente.

Casse des libellés : Depuis l'onglet Format du panneau inspecteur, vous pouvez choisir si les libellés de champs dans cette section s'affichent en casse normale ou en majuscules. Ce réglage s'applique à tous les libellés de la section, y compris le titre.

Aligner les colonnes

Chaque section multi-colonnes propose un bouton d'alignement pour choisir comment les colonnes se répartissent horizontalement :

• Alignement standard : les colonnes se suivent de gauche à droite avec un espacement régulier.
• Alignement droite : la dernière colonne est poussée vers le bord droit de la page, créant un effet de tableau avec totaux à droite — idéal pour faire ressortir les montants sur une facture ou un devis.

Pour supprimer une colonne vide dans une section multi-colonnes, un bouton dédié Supprimer la colonne vide est disponible directement dans la section.

Ajouter des champs

Dans l'onglet Champs de la barre latérale, chaque champ affiche son type (texte, date, montant, tableau…) sous forme de badge. Deux façons d'ajouter un champ :

1. Cliquer sur le champ dans la barre latérale : il est ajouté dans la première colonne disponible.
2. Glisser-déposer le champ depuis la barre latérale vers la colonne souhaitée dans le canevas.

Une icône + apparaît au survol de chaque liste de champs dans une colonne pour ajouter un champ à un emplacement précis.

Aperçu en mode données réelles : En chargeant un document existant dans le constructeur, le canevas bascule en mode aperçu propre : les données réelles du document remplacent les libellés de champs, et les éléments de l'interface de construction (poignées, boutons d'ajout) se masquent pour un rendu fidèle à l'impression. Les sections sélectionnées et les sauts de page restent visibles en superposition légère.

Champs HTML

Les champs de type HTML disposent d'un éditeur dédié dans le panneau inspecteur. Cliquez sur le champ HTML dans le canevas pour ouvrir un éditeur HTML en panneau divisé (split-pane) : le code s'édite à gauche et un aperçu en direct s'affiche à droite. Le contenu Jinja2 (variables {{ doc.field }}, boucles…) est rendu en temps réel dans l'aperçu.

Tableaux enfants (child tables)

Les champs de type tableau (lignes de commande, lignes de facture…) disposent d'une interface dédiée dans le constructeur. Vous pouvez :

• Sélectionner les colonnes du tableau à afficher
• Ajuster la largeur de chaque colonne (en %)
• Masquer les colonnes non pertinentes pour ce format
• Choisir le style du tableau : ligné, rayé ou sans bordure
• Activer ou désactiver l'en-tête du tableau

La boîte de dialogue Configurer les colonnes s'ouvre depuis le champ tableau dans la zone de construction.

Les colonnes de type image sont rendues comme de vraies images dans le PDF — les photos de produits et illustrations apparaissent correctement, sans afficher l'URL brute.

Les valeurs de type Oui/Non (champs à cocher) s'affichent sous forme de texte « Oui » ou « Non » dans l'impression, pour une meilleure lisibilité dans les PDF.

En-tête de lettre

Depuis le panneau inspecteur, en cliquant sur la zone d'en-tête ou de pied de page dans le canevas, vous accédez aux contrôles de l'en-tête de lettre :

• Source : choisissez entre HTML personnalisé ou image pour l'en-tête et le pied de page
• Édition HTML : modifiez directement le contenu HTML de l'en-tête ou du pied de page dans le panneau inspecteur, avec un aperçu Jinja en temps réel
• Bouton Changer l'en-tête de lettre : disponible pour tous les types de sources, il permet de sélectionner un en-tête de lettre différent

Le choix est conservé lors des enregistrements et rechargements.

Enregistrer rapidement

Utilisez le raccourci clavier Ctrl+S (ou Cmd+S sur Mac) pour enregistrer le format d'impression à tout moment sans quitter la zone de construction. Une notification confirme l'enregistrement.

Rendu PDF avec le constructeur

Les formats créés avec le constructeur moderne utilisent automatiquement le moteur Chrome pour la génération PDF, ce qui garantit :

• Un rendu fidèle à l'aperçu dans le navigateur
• La répétition de l'en-tête et du pied de page sur chaque page du PDF
• Le masquage des sections vides (une section sans donnée n'occupe pas d'espace inutile dans le PDF)
• L'absence de coupure à l'intérieur d'un libellé de champ ou d'un titre de section
• Les lignes longues dans les tableaux se répartissent correctement sur plusieurs pages sans perte de contenu
• La numérotation des pages (ex. « Page 1 sur 3 ») fonctionne dès la première page
• La police et la taille de caractères choisies dans le constructeur s'appliquent fidèlement au PDF

      
flowchart LR
    A[Ouvrir un Format d'impression] --> B[Activer le mode Constructeur]
    B --> C[Sélectionner un onglet\nChamps / Blocs / Modèles]
    C --> D[Glisser les champs dans le canevas]
    D --> E[Configurer via le panneau inspecteur]
    E --> F[Choisir l'en-tête de lettre]
    F --> G[Enregistrer avec Ctrl+S]
    G --> H[Générer le PDF via Chrome]

    

Moteurs de génération PDF

Dokos utilise un moteur de rendu pour transformer vos documents en PDF. Deux moteurs sont disponibles, avec des comportements différents en matière de mise en page, de CSS supporté et de gestion des sauts de page.

WKHTMLTOPDF (moteur par défaut)

WKHTMLTOPDF est le moteur historique, basé sur une version ancienne du moteur WebKit. Il est installé automatiquement avec Dokos et ne nécessite aucune configuration particulière.

Limitations connues :

• Support CSS limité : pas de CSS Grid, Flexbox partiel, pas de variables CSS
• Gestion des sauts de page parfois imprécise (coupures en milieu de paragraphe, dernière page blanche)
• Incompatible avec Bootstrap 4 ou 5

Moteur Chrome

Depuis Dokos v5, un deuxième moteur basé sur Chromium (le moteur de Google Chrome) est disponible. Il offre un rendu fidèle aux standards web actuels et résout la plupart des problèmes de mise en page rencontrés avec WKHTMLTOPDF.

Avantages :

• Support CSS complet : Grid, Flexbox moderne, variables CSS, Bootstrap 4 et 5
• Meilleure gestion des sauts de page et des paragraphes
• Rendu identique à ce que vous voyez dans le navigateur

Prérequis : Chromium (~150 Mo) est téléchargé automatiquement à l'activation.

Comparaison

Configurer le moteur de génération PDF

Le moteur peut être défini à deux niveaux :

Niveau global (s'applique à tous les formats d'impression) :

Paramètres > Paramètres d'impression > Générateur PDF

Par format d'impression (prioritaire sur le réglage global) :

Ouvrez un format d'impression > champ Générateur PDF

Les deux options proposées sont wkhtmltopdf et chrome.

Print Designer

Pour les entreprises souhaitant créer des formats d'impression visuels sans écrire de code HTML, l'application Print Designer propose un éditeur WYSIWYG avec glisser-déposer. Elle s'appuie sur le moteur Chrome pour le rendu.

Voir : Print Designer

Contrôle des sauts de page à l'impression

Éviter les coupures en milieu de paragraphe ou de section

Par défaut, WKHTMLTOPDF peut couper un paragraphe ou une section au milieu lorsqu'un document s'imprime sur plusieurs pages. Pour forcer un bloc à rester entier sur la même page, ajoutez des règles CSS dans le champ CSS personnalisé de votre format d'impression ou de votre en-tête de lettre :

/* Garder les sections entières sur la même page */
.section-break {
  page-break-inside: avoid;
}

/* Garder les paragraphes entiers */
p {
  page-break-inside: avoid;
}

Pour forcer le passage à la page suivante avant un élément donné :

.ma-section {
  page-break-before: always;
}

Dernière page blanche

Si la dernière page de vos impressions est blanche — avec uniquement l'en-tête et le pied de page — cela est le plus souvent causé par un saut de page résiduel en fin de document généré par WKHTMLTOPDF.

Ajoutez ce CSS dans le champ CSS personnalisé de votre format d'impression pour masquer les sauts de page résiduels :

/* Supprimer les sauts de page résiduels en fin de document */
.page-break:last-child {
  display: none;
}

Si le problème persiste, vérifiez dans Paramètres > Paramètres d'impression l'option Autoriser les sauts de page dans les tableaux — la décocher peut résoudre les problèmes de pagination sur les documents contenant de longs tableaux.

Voir aussi

• Formats d'impression
• Suivi et validation des documents