Différence configuration et visualisation entête

🚨 Bug
1

Bonjour,

Je suis un nouvel utilisateur de Dokos et je suis en train de paramétrer l’entête des documents.

J’ai donc créé un entête HTML et y ait inséré le code suivant :

<table>
    <tbody>
        <tr>
            <td>
                <strong>Nom Entreprise</strong>
            </td>
            <td>
                Adresse
            </td>
            <td>
                <center><img src="/files/Logo IntraTec - sans texte - transparent.svg" alt="Logo IntraTec - EI Vincent GOSSELIN" style="height: 90.0px;"></center>   
            </td>
        </tr>
    </tbody>
</table>

Si je clique sur le bouton “Aperçu” : :ok_button:

Si j’affiche une facture avec cet entête : le logo reste alligné à gauche

Si je clique sur le bouton PDF dans l’aperçu de la facture : le logo n’apparait pas.

J’ai essayé avec un logo en PNG et en SVG : même résultat.

J’ai essayé plusieurs manières pour aligner le logo : , style=”text-align:center;”, <img align=center … >

A chaque fois l’aperçu est bon, mais dans le rendu final le logo reste aligné à gauche.

Pouvez-vous m’aider à résoudre ce problème d’alignement ?

PS : bravo à l’équipe de développement, cette solution a l’air très complète et flexible :+1:

2

Bonjour Vincent,

Merci pour votre message :heart_hands:

Le problème vient probablement du fait qu’il faut indiquer que le tableau doit prendre 100% de la largeur du container:

<table style="width: 100%;"> <= ICI
    <tbody>
        <tr>
            <td>
                <strong>Nom Entreprise</strong>
            </td>
            <td>
                Adresse
            </td>
            <td>
                <center><img src="/files/dokos-logo-with-text.svg" alt="Logo IntraTec - EI Vincent GOSSELIN" style="height: 90.0px;"></center>   
            </td>
        </tr>
    </tbody>
</table>

J’ai fait un test sur la démo (disponible aujourd’hui uniquement), et le SVG s’affiche correctement en prévisualisation et à l’impression PDF.

=> Sélectionnez bien l’en-tête Test

Le problème vient peut être du fait que l’image téléversée est privée ?
Il faut que les images utilisées dans les impressions soient publiques, sinon le mécanisme d’impression n’y a pas accès.

Bonne journée,

Charles-Henri

3

Merci pour votre réponse rapide :slight_smile:

En effet style="width: 100%;" corrige le problème de centrage dans l’aperçu.

Mais lors du clic sur le bouton PDF, le logo n’apparaît toujours pas, et la mise en forme du document est dégradée.

Par exemple : toutes les coordonnées du client s’affichent sur une seule colonne à gauche du document, alors que dans l’aperçu elles sont sur 3 colonnes. Les cellules du tableau des articles sont séparées par une marge de quelques pixels alors que dans l’aperçu elles sont collées.

Ce problème est sur tous les documents, que je mette un entête ou pas.

J’ai déployé dokos via docker derrière un proxy Traefik.

L’image est bien publique, le nom du fichier est avec des “_” sans espace ni caractère spécial.

Je vois que sur la base de démo tout fonctionne bien. Je dois avoir un problème dans ma configuration.

Est-ce qu’il y a un moyen de regénérer le CSS ou reconstruire la mise en forme des documents ?

4

Bonjour @VinceIT,

Effectivement il doit manquer une ligne de configuration dans le fichier bench/sites/frontend/site_config.json qui est situé à l’intérieur des conteneurs, et ça n’a pas été documenté.

La ligne de commande à effectuer sur le serveur pour corriger dans le conteneur.

docker exec dokos-backend-1 bench --site frontend set-config host_name "http://localhost:8080"

Tu peux ensuite revoir la configuration avec la commande :

docker exec dokos-backend-1 bench show-config

Si ça ne fonctionne toujours pas avec « http://localhost:8080 », il faudra peut-être utiliser plutôt la vraie URL de ton site « https://mon-site.example.com » mais je pense que ça ne sera pas utile pour vérifier que l’impression fonctionne.

Explications

Le fichier site_config.json contient la configuration du site.
La clé de configuration host_name permet d’informer le site de son identité externe : c’est le host_name qui est utilisé pour générer les URLs complètes des liens dans les e-mails envoyés, et aussi les URLs complètes des fichiers pour le moteur d’impression.
En effet, le moteur d’impression réalise l’impression en PDF en s’imprimant “soi-même” comme s’il était un navigateur web : donc le host_name doit être défini sinon c’est http://frontend/ qui est utilisé par défaut et ça ne fonctionne pas.

Corentin

5

Et c’est tout bon !

En effet j’avais un caractère “~” à la fin de la clé de configuration host_name du fichier bench/sites/frontend/site_config.jsondans mon environnement de test.

@chdecultot @corentin Merci pour votre aide :folded_hands:

Bonne journée !

2 Likes