how to generate pdf of the html code. Code snippet is attaching.

1 Answer 123 Views

PDF Export

Anita asked on 28 Nov 2023, 02:02 PM

<section style="margin-top: 1rem;">
        <div class="container h-100" style="width: 100vw;">
            <div id="contentToConvet" class="row d-flex h-100">
                <div class="col">
                    <div class="row">
                        <div class="col-1">
                            <img [src]="imageUrl" alt="Image Description">
                        </div>
                        <div class="col-11">
                            <h3 class="text-black mb-2" style="text-align: center;">CRIME SITREP For SUPERINTENDENT OF
                                POLICE,KARNAL
                            </h3>
                            <h5 style="text-align: center; font-weight: bolder;">{{getCurrentDate()}}</h5>
                            <h5 style="text-align: center;">Up to Midnight of {{getPreviousDate()}}</h5>
                            <h2 style="text-align: center;">Section I: Registration of FIR on {{getPreviousDate()}}
                            </h2>
                        </div>
                    </div>
                    <div>
    
                        <head>
                            <title>Incident Report Form</title>
                        </head>
                        <app-section1-registration-of-fir></app-section1-registration-of-fir>
                        <hr>
                        <app-section2-accused-arrested></app-section2-accused-arrested>
                        <app-section3-case-property></app-section3-case-property>
                        <app-section4-modification-of-sections></app-section4-modification-of-sections>
                        <app-section5-disposal-of-cases></app-section5-disposal-of-cases>
                        <app-section6-case-reopened></app-section6-case-reopened>
                        <app-section7-submission-of-final-reports></app-section7-submission-of-final-reports>
                        <app-section8-preventive-action></app-section8-preventive-action>
                        <app-section9-unnatural-deaths></app-section9-unnatural-deaths>
                        <app-section11-fir-upload></app-section11-fir-upload>
                    </div>
                    <!-- <button class="btn btn-primary" type="button" printSectionId="section" ngxPrint>Generate
                            Report</button> -->
                </div>
    
            </div>
            <button (click)="exportToPDF()">Export to PDF</button>
    
        </div>
    </section>

1 Answer, 1 is accepted

answered on 01 Dec 2023, 09:46 AM

Hi Anita,

Based on the provided code snippet, I do not see the PDFExport being used. Let me know if I am missing any details.

Generally, the desired content should be enclosed in the <kendo-pdf-export> selector. I am not sure what the logic behind the exportToPDF() function is, but I suggest using the built-in saveAs method.

Please see the following demo:

https://stackblitz.com/edit/angular-aunfq3

I hope this helps and let me know how it goes.

Regards,
Tsvetelina
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!