Question

我正在将HTML导出为PDF。我的页面中有多个组件，需要导出为PDF。

在第一个组件中，我有下面代码中的html表

<div id="contentToConvert">
    <h3>Top Ten</h3>

    <p *ngIf="!this.dataAvailable">No data available for now. Please use the filter panel.</p>

    <ng-container *ngIf="this.dataAvailable">

        <ng-container *ngFor="let key of newData">
            <app-table [data]="this.data[key]"></app-table>
        </ng-container>

    </ng-container>
</div>

在另一个组件中，我有一个按钮

<!-- PDF EXPORT  -->
<div class="col-xs-offset-6 col-xs-6 col-sm-offset-9 col-sm-3 ta-r mt-4">
    <button type="button" (click)="downloadPDF()" class="uni-button def">Export to PDF</button>
</div>

我正在使用以下代码导出为PDF。

downloadPDF() {
    let data = document.getElementById("contentToConvert");
    html2canvas(data).then(canvas => {
        const imgWidth = 180;
        const imgHeight = 160;

        const contentDataURL = canvas.toDataURL('image/png');
        const doc = new jsPDF('p', 'mm', 'a4');
        const position = 40;
        doc.addImage(contentDataURL, 'PNG', 15, position, imgWidth, imgHeight);
        doc.save('testFile.pdf');

    })

使用上述代码，我只能为contentToConvert组件内的内容生成PDF。但是我的页面中有多个组件。可以说我也有contentToConvert1，contentToConvert2，contentToConvert3。

如何将所有这些导出到单个pdf文件？

如何将角度分量导出为PDF？

0 个答案: