New to Kendo UI for jQuery? Download free 30-day trial

Preview Export API in PDFViewer


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


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.


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=""></script>
    window.pdfjsLib.GlobalWorkerOptions.workerSrc = '';

  <div class="content-wrapper">
    <input type="text" placeholder="Type your name" />
    <input type="text" placeholder="Type your comment" />    
  <button id="export-pdf">make the pdf</button>

  <div id="pdfViewer">

    var viewer = $("#pdfViewer").kendoPDFViewer({
      pdfjsProcessing: {
        file: ""
      width: "100%",
      height: 500

    $("#export-pdf").click(function() {
        // Convert the DOM element to a drawing by using kendo.drawing.drawDOM.
        .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])
In this article