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>
   

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 MVC Editor Resources

• ASP.NET MVC Editor Documentation

• ASP.NET MVC Editor Demos

• ASP.NET MVC Editor Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Telerik REPL: Exporting a PDF File from an Editor and Loading It into a PDFViewer
• Client-Side API Reference of the Editor for ASP.NET MVC
• Client-Side API Reference of the PDFViewer for ASP.NET MVC
• Server-Side API Reference of the Editor for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base