Generating PDF with CSS
104 views
Skip to first unread message
Gabin BLOQUET -CAMPUS-
Jan 30, 2024, 12:47:17 PM1/30/24
to Flying Saucer Users
Hello everyone,
I try to generate a PDF thanks to this library but CSS isn't rendered.
A template example :
```
I try to generate a PDF thanks to this library but CSS isn't rendered.
A template example :
```
<?xml version="1.0" encoding="UTF-8"?>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
@page {
size: A4;
}
body {
width: 50em;
height: 70em;
font-family: "Roboto Light", sans-serif;
display: flex;
flex-direction: column;
--decathlon-blue: #0082C3;
--decathlon-yellow: #FEE927;
}
header {
justify-content: space-between;
display: flex;
flex-direction: row;
}
main {
flex: 1;
}
.store {
line-height: 3;
}
.phone {
line-height: 1.5;
}
.billing-information {
display: flex;
justify-content: space-between;
margin-top: 2em;
}
#decathlon-logo {
width: 200px;
}
.contracts-sentence {
color: var(--decathlon-blue);
font-style: italic;
font-weight: bold;
}
h1 {
color: var(--decathlon-blue);
}
p {
line-height: 0.4;
}
table {
margin-top: 2em;
width: 100%;
text-align: center;
border-collapse: collapse;
}
th, td {
text-align: center;
}
th {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
td {
padding: 0.5em 0 0.5em 0;
}
th:first-child, td:first-child {
text-align: left;
}
td:nth-last-of-type(2) {
text-align: right;
}
tbody > tr:last-of-type {
font-weight: bold;
border-top: 2em solid white;
}
tbody > tr:last-of-type > td {
padding: 0.5em 0;
background-color: var(--decathlon-yellow);
}
#total-ht {
padding: 1em 0 0.5em 0;
text-align: right;
}
#total-ttc {
padding: 1em 0 0.5em 0;
}
.legal-mentions {
font-size: 0.7em;
}
footer {
justify-content: space-between;
display: flex;
flex-direction: row;
}
.pages {
margin-right: 1em;
}
</style>
<title>Invoice</title>
</head>
<body>
<header>
<h1>{{invoice}}</h1>
<svg aria-hidden="true" class="decathlon-logo vtmn-w-full vtmn-h-full" fill="#0082c3" id="decathlon-logo" role="img"
viewBox="0 0 176 44">
<title>Decathlon</title>
<path d="M140.8,22.1c0,3.3-2.7,5.9-5.9,5.9c-3.2,0-5.9-2.6-5.9-5.9c0-3.2,2.7-5.9,5.9-5.9
C138.2,16.2,140.8,18.8,140.8,22.1z
M20.8,15.9H17v12.4h3.8c1.6,0,3.1-1.1,3.4-2.7c0.4-1.1,0.6-2.3,0.6-3.5c0-1.1-0.2-2.4-0.6-3.4
C23.9,17.1,22.4,15.9,20.8,15.9z M67.7,25h3.3l0-4.5L67.7,25L67.7,25z M176,0v44L0,43.9V0H176z
M44.2,33.6l0-5.6h-7h0v-3.2h6.3
l0-5.6h-6.3v-2.9h7l0-5.7l-13.4,0v7.9c-1.4-4.3-5.4-7.5-10-7.9l-10.2,0v23h10.2c4.5-0.4,8.5-3.6,9.9-7.9v7.9H44.2z
M76.8,10.5h-6.5
h0l-9.9,14.7c-1,1.6-2.8,2.5-4.7,2.5c-3.1,0-5.6-2.5-5.6-5.6c0-3.1,2.5-5.6,5.6-5.6c0.3,0,0.7-0.1,1-0.1c2.1,0,4.3,0.9,5.8,2.4
l2.9-4.5c-2.3-2.4-5.7-3.9-9.1-3.9c-6.3,0-12.1,5.3-12.1,11.6c0,6.3,5.2,11.5,11.5,11.5c3.1,0,6.1-1.3,8.3-3.5h6.8l0,3.5h5.9V10.5z
M92.7,10.5l-15,0v5.3h4.6v17.7h5.9v0V15.9h4.6V10.5z
M112.3,10.5L112.3,10.5L112.3,10.5L112.3,10.5l-5.9,0l0,8.6h-7l0-8.6h-5.9v23
h5.9v-9.1h7v9.1h5.9V10.5z
M165.4,10.5h-5.9h0v10.7l-8.1-10.7l-5.4,0l0,8.4c-1.3-4.9-6-8.4-11.1-8.4c-6.3,0-11.5,5.2-11.5,11.5
c0,2,0.6,4.1,1.6,5.9h-5.8V10.5h-6v23h13.7v-3.2c2.2,2,5.1,3.2,8.1,3.2c5.2,0,9.7-3.5,11.1-8.4l0,8.4h5.9V22.4l8.1,11.2h5.4
L165.4,10.5z"></path>
</svg>
</header>
<article class="billing-information">
<div class="billing-address">
<p>Date de la facture 09.12.23</p>
<p>Numéro de la facture INV00413841</p>
<p class="store">DECATHLON CAMPUS</p>
</div>
<div class="decathlon-address">
<b>DECATHLON FRANCE SAS</b>
<p>4 Boulevard de Mons</p>
<p>59650 VILLENEUVE D'ASCQ</p>
<p class="phone">Tél : 03 20 33 75 00</p>
</div>
</article>
<div class="billing-address">
<b>ADRESSE DE FACTURATION</b>
<p>Sofia le S</p>
<p>21 rue Laroche Foucauld</p>
<p>MAIS NAN</p>
</div>
<p class="contracts-sentence">Retrouvez tous vos contrats sur rental.decathlon.com !</p>
<main>
<table>
<thead>
<tr>
<th>Article</th>
<th>Période</th>
<th>Quantité</th>
<th>PU HT</th>
<th>%TVA</th>
<th>Montant TVA</th>
<th>Total TTC</th>
</tr>
</thead>
<tbody>
<tr>
<td>Location</td>
<td>Du 01/01/2023 au 18/02/2024</td>
<td>1</td>
<td>20.00€</td>
<td>20 %</td>
<td>4.00€</td>
<td>24.00€</td>
</tr>
<tr>
<td>Entretien annuel</td>
<td>Du 01/01/2023 au 18/02/2024</td>
<td>1</td>
<td>20.00 €</td>
<td>20 %</td>
<td>4.00 €</td>
<td>24.00 €</td>
</tr>
<tr>
<td>Service casse</td>
<td>Du 01/01/2023 au 18/02/2024</td>
<td>1</td>
<td>20.00 €</td>
<td>20 %</td>
<td>4.00 €</td>
<td>24.00 €</td>
</tr>
<tr>
<td colspan="5"></td>
<td id="total-ht">Total HT</td>
<td id="total-ttc">25,83 €</td>
</tr>
<tr>
<td colspan="4"></td>
<td>Montant TVA</td>
<td>20,00 %</td>
<td>5,17 €</td>
</tr>
<tr>
<td colspan="4"></td>
<td>Montant TVA</td>
<td>0,00 %</td>
<td>0,00 €</td>
</tr>
<tr>
<td colspan="5">Facture Acquittée</td>
<td>Total TTC</td>
<td>31,00 €</td>
</tr>
</tbody>
</table>
</main>
<footer>
<section class="legal-mentions">
<p>DECATHLON FRANCE SAS - 4 Bd de Mons - SAS à capital variable</p>
<p>RCS LILLE : B500569405 - N° TVA FR11500569405 - N° SIRET : 500 569 405 03239</p>
<p>Code APE 4764Z - 59650 VILLENEUVE D'ASCQ FRANCE</p>
</section>
<span class="pages">1/1</span>
</footer>
</body>
</html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
@page {
size: A4;
}
body {
width: 50em;
height: 70em;
font-family: "Roboto Light", sans-serif;
display: flex;
flex-direction: column;
--decathlon-blue: #0082C3;
--decathlon-yellow: #FEE927;
}
header {
justify-content: space-between;
display: flex;
flex-direction: row;
}
main {
flex: 1;
}
.store {
line-height: 3;
}
.phone {
line-height: 1.5;
}
.billing-information {
display: flex;
justify-content: space-between;
margin-top: 2em;
}
#decathlon-logo {
width: 200px;
}
.contracts-sentence {
color: var(--decathlon-blue);
font-style: italic;
font-weight: bold;
}
h1 {
color: var(--decathlon-blue);
}
p {
line-height: 0.4;
}
table {
margin-top: 2em;
width: 100%;
text-align: center;
border-collapse: collapse;
}
th, td {
text-align: center;
}
th {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
td {
padding: 0.5em 0 0.5em 0;
}
th:first-child, td:first-child {
text-align: left;
}
td:nth-last-of-type(2) {
text-align: right;
}
tbody > tr:last-of-type {
font-weight: bold;
border-top: 2em solid white;
}
tbody > tr:last-of-type > td {
padding: 0.5em 0;
background-color: var(--decathlon-yellow);
}
#total-ht {
padding: 1em 0 0.5em 0;
text-align: right;
}
#total-ttc {
padding: 1em 0 0.5em 0;
}
.legal-mentions {
font-size: 0.7em;
}
footer {
justify-content: space-between;
display: flex;
flex-direction: row;
}
.pages {
margin-right: 1em;
}
</style>
<title>Invoice</title>
</head>
<body>
<header>
<h1>{{invoice}}</h1>
<svg aria-hidden="true" class="decathlon-logo vtmn-w-full vtmn-h-full" fill="#0082c3" id="decathlon-logo" role="img"
viewBox="0 0 176 44">
<title>Decathlon</title>
<path d="M140.8,22.1c0,3.3-2.7,5.9-5.9,5.9c-3.2,0-5.9-2.6-5.9-5.9c0-3.2,2.7-5.9,5.9-5.9
C138.2,16.2,140.8,18.8,140.8,22.1z
M20.8,15.9H17v12.4h3.8c1.6,0,3.1-1.1,3.4-2.7c0.4-1.1,0.6-2.3,0.6-3.5c0-1.1-0.2-2.4-0.6-3.4
C23.9,17.1,22.4,15.9,20.8,15.9z M67.7,25h3.3l0-4.5L67.7,25L67.7,25z M176,0v44L0,43.9V0H176z
M44.2,33.6l0-5.6h-7h0v-3.2h6.3
l0-5.6h-6.3v-2.9h7l0-5.7l-13.4,0v7.9c-1.4-4.3-5.4-7.5-10-7.9l-10.2,0v23h10.2c4.5-0.4,8.5-3.6,9.9-7.9v7.9H44.2z
M76.8,10.5h-6.5
h0l-9.9,14.7c-1,1.6-2.8,2.5-4.7,2.5c-3.1,0-5.6-2.5-5.6-5.6c0-3.1,2.5-5.6,5.6-5.6c0.3,0,0.7-0.1,1-0.1c2.1,0,4.3,0.9,5.8,2.4
l2.9-4.5c-2.3-2.4-5.7-3.9-9.1-3.9c-6.3,0-12.1,5.3-12.1,11.6c0,6.3,5.2,11.5,11.5,11.5c3.1,0,6.1-1.3,8.3-3.5h6.8l0,3.5h5.9V10.5z
M92.7,10.5l-15,0v5.3h4.6v17.7h5.9v0V15.9h4.6V10.5z
M112.3,10.5L112.3,10.5L112.3,10.5L112.3,10.5l-5.9,0l0,8.6h-7l0-8.6h-5.9v23
h5.9v-9.1h7v9.1h5.9V10.5z
M165.4,10.5h-5.9h0v10.7l-8.1-10.7l-5.4,0l0,8.4c-1.3-4.9-6-8.4-11.1-8.4c-6.3,0-11.5,5.2-11.5,11.5
c0,2,0.6,4.1,1.6,5.9h-5.8V10.5h-6v23h13.7v-3.2c2.2,2,5.1,3.2,8.1,3.2c5.2,0,9.7-3.5,11.1-8.4l0,8.4h5.9V22.4l8.1,11.2h5.4
L165.4,10.5z"></path>
</svg>
</header>
<article class="billing-information">
<div class="billing-address">
<p>Date de la facture 09.12.23</p>
<p>Numéro de la facture INV00413841</p>
<p class="store">DECATHLON CAMPUS</p>
</div>
<div class="decathlon-address">
<b>DECATHLON FRANCE SAS</b>
<p>4 Boulevard de Mons</p>
<p>59650 VILLENEUVE D'ASCQ</p>
<p class="phone">Tél : 03 20 33 75 00</p>
</div>
</article>
<div class="billing-address">
<b>ADRESSE DE FACTURATION</b>
<p>Sofia le S</p>
<p>21 rue Laroche Foucauld</p>
<p>MAIS NAN</p>
</div>
<p class="contracts-sentence">Retrouvez tous vos contrats sur rental.decathlon.com !</p>
<main>
<table>
<thead>
<tr>
<th>Article</th>
<th>Période</th>
<th>Quantité</th>
<th>PU HT</th>
<th>%TVA</th>
<th>Montant TVA</th>
<th>Total TTC</th>
</tr>
</thead>
<tbody>
<tr>
<td>Location</td>
<td>Du 01/01/2023 au 18/02/2024</td>
<td>1</td>
<td>20.00€</td>
<td>20 %</td>
<td>4.00€</td>
<td>24.00€</td>
</tr>
<tr>
<td>Entretien annuel</td>
<td>Du 01/01/2023 au 18/02/2024</td>
<td>1</td>
<td>20.00 €</td>
<td>20 %</td>
<td>4.00 €</td>
<td>24.00 €</td>
</tr>
<tr>
<td>Service casse</td>
<td>Du 01/01/2023 au 18/02/2024</td>
<td>1</td>
<td>20.00 €</td>
<td>20 %</td>
<td>4.00 €</td>
<td>24.00 €</td>
</tr>
<tr>
<td colspan="5"></td>
<td id="total-ht">Total HT</td>
<td id="total-ttc">25,83 €</td>
</tr>
<tr>
<td colspan="4"></td>
<td>Montant TVA</td>
<td>20,00 %</td>
<td>5,17 €</td>
</tr>
<tr>
<td colspan="4"></td>
<td>Montant TVA</td>
<td>0,00 %</td>
<td>0,00 €</td>
</tr>
<tr>
<td colspan="5">Facture Acquittée</td>
<td>Total TTC</td>
<td>31,00 €</td>
</tr>
</tbody>
</table>
</main>
<footer>
<section class="legal-mentions">
<p>DECATHLON FRANCE SAS - 4 Bd de Mons - SAS à capital variable</p>
<p>RCS LILLE : B500569405 - N° TVA FR11500569405 - N° SIRET : 500 569 405 03239</p>
<p>Code APE 4764Z - 59650 VILLENEUVE D'ASCQ FRANCE</p>
</section>
<span class="pages">1/1</span>
</footer>
</body>
</html>
```
I tried a lot of css headers but it doesn't work.
Do you have any idea ? :)
Thanks a lot !!
implementation("org.xhtmlrenderer:flying-saucer-core:9.5.1")
implementation("org.xhtmlrenderer:flying-saucer-pdf:9.5.1")
implementation("org.xhtmlrenderer:flying-saucer-pdf:9.5.1")
Do you have any idea ? :)
Thanks a lot !!
Olivier Bourgain
Jan 31, 2024, 4:56:07 AM1/31/24
to flying-sa...@googlegroups.com
Hi Gablin
I think flying-saucer doesn't support some CSS in your example :
- flex and css variables are not supported,
- not all css pseudo-elements are supported (see list here: https://stackoverflow.com/questions/45926799/does-flying-saucer-support-pseudo-elements)
--
You received this message because you are subscribed to the Google Groups "Flying Saucer Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flying-saucer-u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flying-saucer-users/51830e6a-ddd3-43b7-ac02-b71868b6a266n%40googlegroups.com.
Gabin BLOQUET -CAMPUS-
Feb 5, 2024, 9:37:27 AM2/5/24
to Flying Saucer Users
Thanks a lot @obourgain ! It works !
I have another question, generation create an empty second page, do you know why ? :)
I have another question, generation create an empty second page, do you know why ? :)
Neil Morrison
Feb 5, 2024, 2:39:43 PM2/5/24
to flying-sa...@googlegroups.com
We've had it generate blank pages when content is specified as keep together. If the total content is greater than a page it realises it doesn't fit and starts on a new page but leaves a blank as well.
If you're not using the outer page borders you can use something like itext to strip the blank pages
Neil
To view this discussion on the web visit https://groups.google.com/d/msgid/flying-saucer-users/06d319d7-0d50-443e-9fcb-fce6456f5fabn%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages