Как экспортировать угловые компоненты в PDF? - PullRequest
Новая
       12

Как экспортировать угловые компоненты в PDF?

0 голосов
/ 11 марта 2019

Я работаю над экспортом 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');

    })

Используя приведенный выше код, я могу создавать PDF для содержимого только внутри компонента contentToConvert. Но у меня есть несколько компонентов на моей странице. Допустим, у меня также есть contentToConvert1, contentToConvert2, contentToConvert3.

Как я могу экспортировать все это в один файл PDF?

...