I have two components: Component1 (for printing) and Component2 (list of quotations). What I want is when I select one quotation and click to print the file, download without displaying the content of page.
My current solution works but show the page after clicking on "telecharger" the process work perfectly.
But I want something like this: I want that after click on "imprimer" the file downloaded directely.
This is my code for Quotation Component (when I select quotation).
QuotationComponent.ts
printAction() {
window.open('print/' + JSON.stringify(1) + '?' + JSON.stringify(this.selected[0].element.id), "_blank");
//I want to avoid the opening of window and download directely
}
QuotationComponent.html
<button type="button" class="btn btn-sm btn-secondary" [disabled]="selected.length != 1" (click)="printAction()">
Imprimer
</button>
Code for Print Component
PrintComponent.ts
@ViewChild('printFile', { static: false }) printFile: ElementRef;
async printingAction() {
const doc = new jsPDF('p', 'pt', 'a4');
const specialElementHandlers = {
'#editor': function(element, renderer) {
return true;
}
};
const printFile = this.printFile.nativeElement;
doc.fromHTML(printFile.innerHTML, 20, 20, {
width: 800,
'elementHandlers': specialElementHandlers
});
doc.save('printFile.pdf');
// doc.style.display="none"
}
PrintComponent.html
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script> -->
<body id="printFile" #printFile >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<ng-template ngFor let-page [ngForOf]="paginationIndex">
<div id="headerM">
<div class="bloc-DroitM">
<b>
<font size="+3"> {{title}} N° {{id}} </font>
</b>
<p id="rcorners2M">
<b>Id client :</b> {{customer.id}}<br>
<b>Nom client :</b>{{customer.name}}<br>
<b> Adr : </b>{{adress.number}} {{adress.street}} {{adress.state}} {{adress.geoCode}}
{{adress.city}}<br>
<b> Tél :</b> {{tel}}<br>
</p>
<h6 style="text-align: center;">
<span> Date : {{date | date:'dd/MM/yyyy'}}</span>
</h6>
</div>
<div class="bloc-GaucheM">
<ul style="list-style-type:none;">
<li>
<button style="font-size: 40px; padding: 20px" (click)="printingAction()">Télécharger</button>
</li>
<li> <b>
<font size="+3"> Nom de Societe </font>
</b> </li><br>
<li><b>Détails de fonctionnement de la sociéte </b></li>
<li><b>Adresses de la sociéte</b></li>
<li><b>Code TVA :</b> Code TVA de la sociéte</li>
<li><b>RC : </b>Code RC de la sociéte</li>
<li><b>Tél :</b> Téléphones de la sociéte</li>
<li> <b>Fax :</b> Fax de la sociéte</li>
<li> <b>E-mail :</b> Adresse e-mail de la sociéte</li>
<li><b> Web :</b> Site web de sociéte</li>
</ul>
</div>
</div>
<br><br><br><br>
<div id="contenuM">
<table>
<thead>
<tr>
<th>Réf</th>
<th>Désignation</th>
<th>U.</th>
<th>Qté</th>
<th>P.U HT</th>
<th>R.%</th>
<th>TVA</th>
<th>P.T HT</th>
</tr>
</thead>
<tbody>
<tr class="lastM" style="text-align: center;"
*ngFor="let index of printDetails; let i = index ;">
<td valign="top">{{productObject[i].reference}} </td>
<td valign="top">{{productObject[i].name}}</td>
<td valign="top">{{printDetails[i].unity.name}}</td>
<td valign="top">{{printDetails[i].detail.quantity}}</td>
<td valign="top">{{printDetails[i].detail.price}}</td>
<td valign="top">{{printDetails[i].detail.discount}}</td>
<td valign="top">{{printDetails[i].detail.tax}}</td>
<td valign="top">{{printDetails[i].detail.quantity * printDetails[i].detail.price}}</td>
</tr>
</tbody>
</table>
</div>
<div style=" display: flex;margin-bottom: 70px; padding-top: 70px;">
<div style="width: 40%">
<table *ngIf="page == paginationIndex.length">
<TR>
<TH COLSPAN=2 style="width: 150px"> TOTAL H.TVA</TH>
<TH COLSPAN=2 style="width: 150px">{{totalHt.toFixed(2)}}</TH>
</TR>
<TR>
<TH COLSPAN=2> TOTAL REMISE</TH>
<TH COLSPAN=2>{{totalRemise.toFixed(2)}}</TH>
</TR>
<TR>
<TH COLSPAN=2> TOTAL TVA</TH>
<TH COLSPAN=2>{{totalTVA.toFixed(2)}}</TH>
</TR>
<TR>
<TH COLSPAN=2> TIMBRE</TH>
<TH COLSPAN=2>0.500</TH>
</TR>
<TR>
<TH COLSPAN=2> TOTAL TTC</TH>
<TH COLSPAN=2>{{(totalHt + totalTVA + 0.5 - totalRemise).toFixed(2)}}</TH>
</TR>
</table>
</div>
<div class="pageCachet">
<h3 style="margin-top: 0px;"> CACHET ET SIGNATURE </h3>
</div>
</div>
<div>
<br><div></div><br><div></div><br><div></div>
</div>
<div id="footerM" *ngIf="page == paginationIndex.length">
<p> NB : Vente en suspension de la TVA suivant la décision N° 012536454 du 02/03/2015.Le montant de la
TVA
suspendu est :<b> {{totalTVA.toFixed(2)}}</b></p>
<span style=" border:2px solid black;padding:3px;width: 1000px;"> ARRETE LE PRESENTE FACTURE A LA SOMME
DE :
<b>{{(totalHt + totalTVA + 0.5 - totalRemise).toFixed(2)}}</b>
</span>
</div>
<div *ngIf="page != paginationIndex.length" style="page-break-after:always !important;">
</div>
</ng-template>
</body>
