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 conïŹance 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âŠ