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

Environment

Product Version	2022.3.913
Product	Editor for Progress® Telerik® UI for ASP.NET MVC
Product	PDFViewer for Progress® Telerik® UI for ASP.NET MVC

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:

Create a hidden Editor with specified PDF export settings, a page template, and a PDFViewer.
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.
Handle the PdfExport event of the editor and pass the file to the PDFViewer by using the fromFile() method.

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.

    @(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>

    <script>
        // Ensure that the script below is included before the initialization of the Editor.
        kendo.ui.Editor.fn.saveAsPDF = function() {
            var progress = new $.Deferred();
            var promise = progress.promise();
            var args = { promise: promise };

            if (this.trigger("pdfExport", args)) {
            return;
            }

            var options = this.options.pdf;

            this._drawPDF(progress)
            .then(function(root) {
            return kendo.drawing.exportPDF(root, options);
            })
            .done(function(dataURI) {
            progress.resolve(dataURI);
            })
            .fail(function(err) {
            progress.reject(err);
            });
            return promise;
        };

        function onPdfExport(e) {
            e.promise.then(function(data) {
                var viewer = $("#pdfviewer").data("kendoPDFViewer");
                viewer.fromFile({ data: data.split(',')[1] });
            });
        }

        $(document).ready(function () {
            var editorComponent = $("#editor").getKendoEditor();
            editorComponent.options.pdf.template = $("#page-template").html();
            editorComponent.saveAsPDF();
        });
    </script>

    <script type="x/kendo-template" id="page-template">
        <div class="page-template" style="position:absolute; top:0; left:0; width:100%; height:100%">
            <div class="header" style="position:absolute; top:10px; left:20px; width:100%; font-size:18px; border-bottom: 1px solid black;">
                Header Text
            </div>
            <div class="footer" style="position:absolute; bottom:20px; right:10px; width:100%;">
                <div style="float: right">Page #: pageNum # of #: totalPages #</div>
            </div>
        </div>
    </script>

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

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

Environment

Description

Solution

More ASP.NET MVC Editor Resources

See Also

Getting Started

Support Resources

Community