New to Telerik UI for ASP.NET MVC? Download free 30-day trial

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:

  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.

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

Refer to this REPL for a runnable example.

See Also

In this article