Preview Export API in PDFViewer

Environment

Product Version	2019.2.619
Product	Progress® Kendo UI® PDFViewer for jQuery

Description

Instead of enabling your users to download the PDF that the Kendo UI Drawing library will generate, your project may require you only to show it to them.

Solution

Combine the Drawing API with the Kendo UI PDFViewer component.

1. Generate the PDF as usual through the kendo.drawing.drawDOM() method.
2. When the promise is resolved, in the done method, use the fromFile method of the PDFViewer component instead of kendo.saveAs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.6.82/pdf.min.mjs" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.6.82/pdf.worker.min.mjs" type="module"></script>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.all.min.js" type="module"></script>
  <div class="content-wrapper">
    <input type="text" placeholder="Type your name" />
    <input type="text" placeholder="Type your comment" />    
  </div>
  <br/>
  <button id="export-pdf">make the pdf</button>
  <br/>
  <br/>

  <div id="pdfViewer">
  </div>

<script type="module">
    var viewer = $("#pdfViewer").kendoPDFViewer({
      pdfjsProcessing: {
        file: ""
      },
      width: "100%",
      height: 500
    }).getKendoPDFViewer();

    $("#export-pdf").click(function() {
        // Convert the DOM element to a drawing by using kendo.drawing.drawDOM.
        kendo.drawing.drawDOM($(".content-wrapper"))
        .then(function(group) {
            // Render the result as a PDF file.
            return kendo.drawing.exportPDF(group, {
                paperSize: "auto",
                margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
            });
        })
        .done(function(data) {
           viewer.fromFile({ data: data.split(',')[1] }) // For versions prior to R2 2019 SP1, use window.atob(data.split(',')[1])
        });
    });
</script>