Bonjour,
J’ai créer un template en Jinja avec du CSS ect. Mais quand j’appuis sur l’icone impression, la preview est bien différente de l’impression. Je ne comprend pas pourquoi il y as autant d’écart.
En Preview
En impression
Bonjour @lateliercom,
J’imagine que tu utilises Flexbox ? Si c’est le cas, flexbox n’est pas totalement supporté par wkhtmltopdf, le moteur de rendu PDF actuel de Dokos.
Merci pour ta réponse, mais voici le HTML, je n’ai pas de flexbox :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style>
#invoice{
padding: 30px 0px 0;
position: relative;
width: 90%;
}
#invoice:before {
content: '';
background-image: url('/private/files/barre-devis.svg');
background-position: right bottom;
background-repeat: no-repeat;
height: 100%;
display: block;
width: 100%;
position: absolute;
bottom: 0;
right: -80px;
}
.invoice {
position: relative;
/*background-color: #FFF;*/
min-height: 680px;
padding: 15px 0px;
}
.invoice header {
padding: 0;
margin-bottom: 40px;
border: none;
}
.info_sec{
margin-bottom:35px;
}
.info_box{
border:1px solid #124d9d;
width:152px;
height:162px;
margin-left:10px;
position:relative;
text-align:center;
padding:20px;
}
.info_box .icon{
position:absolute;
left:-10px;
top:-10px;
}
.info_box h2{
text-transform:uppercase;
color:#2a2a2a;
font-size:14px;
line-height:16px;
font-weight:700;
position:relative;
}
.info_box h2:after{
content:'';
width:30px;
height: 2px;
background-color: #124d9d;
display: block;
margin: 0 auto;
bottom: -5px;
position: relative;
}
.info_box h3{
text-transform:uppercase;
color:#97989d;
font-size:14px;
line-height:16px;
font-weight:400;
margin-bottom:20px;
}
.info_box p{
color:#97989d;
font-size:12px;
line-height:14px;
font-weight:400;
margin-bottom:0px;
}
.invoice .invoice-details {
position:relative;
max-width: 400px;
margin: 0 auto;
}
.invoice .invoice-details:before{
content: '';
background-color: #124d9d;
height: 2px;
width: 85%;
position: absolute;
left: 30px;
top: 30px;
}
.invoice .invoice-details img{
margin-bottom:12px;
}
.invoice .invoice-details h2{
text-transform:uppercase;
color:#2a2a2a;
font-size:14px;
line-height:16px;
font-weight:700;
position:relative;
}
.invoice .invoice-details h2:after{
content:'';
width:30px;
height: 2px;
background-color: #124d9d;
display: block;
margin: 0 auto;
bottom: -5px;
position: relative;
}
.invoice .invoice-details .number_txt{
text-transform:uppercase;
color:#124d9d;
font-size: 20px;
line-height: 30px;
font-weight: 700;
margin-bottom:20px;
}
.invoice .invoice-to .to {
margin-top: 0;
margin-bottom: 0
}
.invoice main {
/*padding-bottom: 50%;*/
padding-bottom: 600px;
}
.invoice main .notices {
font-size:10px;
}
.invoice main .notices .notice {
font-size:10px;
}
.invoice table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.invoice table tr{
background: #edeeed;
}
.invoice table td,
.invoice table th {
padding: 15px;
background: #edeeed;
border: 5px solid #fff;
}
.invoice table td{
height:40px;
}
.invoice table th {
white-space: nowrap;
font-weight: 400;
font-size: 18px;
color:#fff;
background-color:#124d9d;
text-align: center;
text-transform:uppercase;
font-weight:600;
font-size:12px;
text-align:center;
}
.invoice table td h3 {
margin: 0;
font-weight: 400;
color: #3989c6;
font-size: 1.2em
}
.invoice table .currency_sec{
padding:0!important;
}
.invoice table .currency_sec .currency_box{
color:#124d9d;
display: block;
border: 2px solid #124d9d;
font-size:13px;
padding:10px;
font-weight:800;
}
.invoice table .rate,.invoice table .total,.invoice table .unit {
text-align: right;
font-size: 1.2em
}
.invoice table .no {
color: #fff;
font-size: 1.6em;
background: #3989c6;
text-align:center;
}
.invoice table .unit {
background: #ddd
}
.invoice table .total {
background: #3989c6;
color: #fff
}
.invoice table tfoot td {
}
.invoice table tfoot tr:last-child td {
color: #ffffff;
font-size: 14px;
font-weight:400;
line-height: 20px;
text-align: center;
}
.invoice footer {
width: 100%;
text-align: left;
color: #777;
font-size:10px;
padding: 0;
}
.powered-by{
padding-bottom:30px;
margin-bottom:30px;
border-bottom:1px solid #124d9d;
}
@media print {
.invoice .invoice-details:before{
top: 60px;
}
}
</style>
<div id="invoice">
<div class="invoice overflow-auto">
<div style=""> <!--max-width: 670px; margin:0 auto;-->
<header>
<div class="row">
<div class="col">
<img src="/private/files/logo.svg" data-holder-rendered="true" style="max-width:333px;width:333px;" />
</div>
</div>
</header>
<main>
<div class="row info_sec">
<div class="col-3">
<div class="info_box">
<img src="/files/i-icon.jpg" class="icon" data-holder-rendered="true" />
<h2>Devis Pour</h2>
<h3>{{ doc.customer_name }}</h3>
<h2>Addresse</h2>
<p>{{doc.address_display}}</p>
</div>
</div>
<div class="col-9 text-center">
<div class="invoice-details">
<div class="row">
<div class="col-4 text-center">
<img src="/private/files/euro.svg" class="icon" data-holder-rendered="true" style="max-width:60px;" />
<h2>Total Ttc</h2>
<span class="number_txt">{{"%.2f"|format(doc.grand_total)}} €</span>
</div>
<div class="col-4 text-center">
<img src="/private/files/calendar.svg" class="icon" data-holder-rendered="true" style="max-width:60px;" />
<h2>Date D'envoi</h2>
<span class="number_txt">{{ frappe.utils.formatdate(doc.transaction_date, "dd/mm/yy") }}</span>
</div>
<div class="col-4 text-center">
<img src="/private/files/numero.svg" class="icon" data-holder-rendered="true" style="max-width:60px;" />
<h2>Devis N</h2>
<span class="number_txt">{{ doc.name }}</span>
</div>
</div>
</div>
</div>
</div>
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="text-center" style="width:370px; background-color: #124d9d;">Descriptif</th>
<th class="text-center" style="width:90px">Prix Unitaire</th>
<th class="text-center" style="width:90px">Quantite</th>
<th class="text-center " style="width:90px">Total HT</th>
</tr>
</thead>
<tbody>
{%- for row in doc.items -%}
<tr>
<td class="text-left"> <strong>{{ row.item_name }}</strong> </br> {{row.description}}</td>
<td class="text-center"> {{"%.2f"|format(row.rate)}} </td>
<td class="text-center"> {{row.qty}} </td>
<td class="text-center"><span class="currency"> {{"%.2f"|format(row.amount)}} </span></td>
</tr>
{%- endfor -%}
</tbody>
<tfoot>
<tr style="background-color:#f7f8f7;">
<td style="background-color:#f7f8f7;color:#2a2a2a; font-weight:700;" colspan="">BON POUR ACCORD - SIGNATURE + TAMPON</td>
<td style="background-color:#124d9d;" colspan="">SOUS-TOTAL <br /> REMISE <br /> TVA (20%)</td>
<td style="background-color:#124d9d;" colspan="1">{{"%.2f"|format(doc.total)}} € <br /> {{doc.additional_discount_percentage}}% <br /> {{"%.2f"|format(doc.total_taxes_and_charges)}} €</td>
<td class="currency_sec" style="background-color:#ffffff;"><span class="currency_box"> TOTAL <br /> TTC <br /> {{"%.2f"|format(doc.grand_total)}} €</span></td>
</tr>
</tfoot>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="text-center" style="width:370px; background-color: #fff; text-center" > <div class="notices">
<div class="notice">MÉTHODE DE PAIEMENT : CHÈQUE - VIREMENT</div>
</div></td>
<td class="text-center" style="width:90px;background-color: #fff; "> </td>
<td class="text-center" style="width:90px;background-color: #fff; "> </td>
<td class="text-center" style="width:90px;background-color: #fff; "><span class="currency"> </span></td>
</tr>
</tbody>
</table>
</main>
<footer>
<div class="powered-by centered" role="img" style="">
<strong>Conditions de règlement :</strong> À réception de la facture. Toute prestation complémentaire sera facturée en sus. Nos prix sont fermes pour 2 mois. Nos conditions générales de vente sont disponibles sur www.lateliercom.fr. Nous vous remercions de la confiance que vous voudrez bien nous témoigner, et vous assurons du meilleur soin porté à la réalisation de vos travaux.
</div>
<div class="row">
<div class="col">
<img src="/private/files/footer.svg" style="width:100%;" data-holder-rendered="true" />
</div>
</div>
</footer>
</div>
</div>
</div>
Bonjour @corentin
J’ai bien le dernier wkhtmltopdf avec qt patched, mais j’ai toujours ce problème de preview pdf, sais tu comment je peux corriger ce problème ?
Pour tes trois images/logos dans l’entête, peut-être qu’il faut essayer en définissant les attributs HTML width et height plutôt que d’utiliser la propriété CSS max-width ?
- <img … style="max-width:60px;" />
+ <img … width="60" height="60" />
Merci @corentin, mais je suis passé dur Frappe Print Designer qui est un peux plus facile d’utilisation. Mais j’ai un bug, lors du design, j’ai bien les images ect, mais lors de la preview sur un devis, tous disparait, idem en PDF et aussi en impression. Je ne vois pas d’ou viens le problème car je n’ai aucune erreur en plus…