New to Kendo UI for jQueryStart a free 30-day trial

Preview Export API in PDFViewer

Environment

Product Version2019.2.619
ProductProgress® 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>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support