New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Export PDF file from an Editor and Load it into a PDFViewer

Environment

Product Version2022.3.913
ProductEditor for Progress® Telerik® UI for ASP.NET Core
ProductPDFViewer for Progress® Telerik® UI for ASP.NET Core

Description

How can I export a PDF file with a page template from a hidden Editor and load it into a PDFViewer?

Solution

The example below relies on the following key steps:

  1. Create a hidden Editor with specified PDF export settings, a page template, and a PDFViewer.

  2. Override the default implementation of the saveAsPDF() method of the Editor so the data about the PDF file is accessible in the returned promise in the PdfExport event handler.

  3. Handle the PdfExport event of the editor and pass the file to the PDFViewer by using the fromFile() method.

  4. When the page is loaded, get a reference to the hidden Editor, set the page template in the Editor's PDF options, and trigger its saveAsPDF() method.

    Index.cshtml
        @(Html.Kendo().PDFViewer()
            .Name("pdfviewer")
        )
    
        <div class="editor-block" style="visibility: hidden;">
            @(Html.Kendo().Editor()
                .Name("editor")
                .Pdf(pdf => pdf
                    .Margin(20, 20, 20, 20)
                    .PaperSize("A4")
                )
                .Tools(tools => tools
                    .Pdf()
                )
                .Events(events => events.PdfExport("onPdfExport"))
                .Value(@<text>Editor content</text>)
            )   
        </div>

For a runnable example based on the code above, refer to the REPL example on exporting a PDF file from an Editor.

More ASP.NET Core Editor Resources

See Also