angular - 如何将另一个组件中的html转换为pdf（Angular 8 + jspdf）

Question

我有两个组件：Component1（用于打印）和 Component2（引用列表）。我想要的是当我选择一个报价并单击打印文件时，下载而不显示页面内容。

我当前的解决方案有效，但在单击“telecharger”后显示页面，该过程完美运行。

这是我的报价组件代码（当我选择报价时）。
报价组件.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
}

引用组件.html

<button type="button" class="btn btn-sm btn-secondary" [disabled]="selected.length != 1" (click)="printAction()">
Imprimer
</button>

打印组件代码

打印组件.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"
}

打印组件.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>

angular - 如何将另一个组件中的html转换为pdf（Angular 8 + jspdf）

0 回答 0

Related

Reference