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 Core
Product	PDFViewer 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.

       @(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 Core Editor Resources

• ASP.NET Core Editor Documentation

• ASP.NET Core Editor Demos

• ASP.NET Core Editor Product Page

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

• Telerik UI for ASP.NET Core 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 Core
• Client-Side API Reference of the PDFViewer for ASP.NET Core
• Server-Side API Reference of the Editor for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base