Discussion :

[drake56]

Bonjour,

J'ai essayé tout un tas de choses pour avoir un rendu comme celui-ci sans succès :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---------------
    Header
---------------
Bloc du haut
---------------
Trucs  | Détail
         |
         |
---------------
 
Saut de page
 
--------------------------
            Header
--------------------------
Suite         | Suite
Trucs         | Détail
Éventuelle  | Éventuelle

Avez-vous une solution miracle ? Ce code sert pour la génération d'un PDF en utilisant thymeleaf et weasyprint.
A noter aussi que Trucs doit faire 25% de la page et Détail 75% (du coup column-count ne fait pas l'affaire )
Un extrait du code HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  <header>
    <div style="width: 100%;">
       ...
    </div>
  </header>
<!-- Bloc du haut -->
  <div class="color-light-blue" style="font-family: 'Montserrat Semi-Bold';font-size: 22pt;font-weight: bold;display: inline-block;margin-bottom: 10px;">
    <span th:text="${program.get('title')}">Title program</span>
  </div> 
  <div class="color-dark-blue" style="font-family: 'Montserrat Light';font-size:14pt;display: inline-block;margin-bottom: 10px;">
    <span th:text="${program.get('goal')}">Goal program</span>
  </div>
  <div>
    <img src="Capture-3.png">
  </div>
<!-- Fin bloc du haut -->
  <div class="row">
<!-- Trucs -->
    <div class="column left">
       ...
    </div>
<!-- Fin trucs -->
<!-- Détail -->
    <div class="column right">
       ...
    </div>
<!-- Fin détails -->
  </div>

Merci d'avance pour votre aide

[NoSmoking]

Bonjour,

J'ai essayé tout un tas de choses pour avoir un rendu comme celui-ci sans succès

il eut été intéressant que tu nous mettes qu'en même ce à quoi tu as abouti.

Ce que tu montres comme schéma correspond bien à une utilisation du modèle Grid layout mais pas uniquement, table, flexpourrait convenir pour la partie truc/détail.

Concernant le saut de page il existe la propriété page-break-after qui fait le job.

[marc.collin]

j'utilise un autre produit: https://github.com/danfickle/openhtmltopdf qui semble avoir plus d'activité

pour le saut de page

j'utilise page-break-after:always; comme @NoSmoking l'a mentionné

[drake56]

Bonjour,

Je vous remercie pour votre retour, on a réussi à contourner le problème en partant sur ce schéma (ça a convenu à notre utilisateur final).



Bonne journée