Preview Export API in PDF Viewer


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


Sometimes, you may want to show your users the PDF that the Kendo Drawing API will generate, instead of having them download it.

You can do this by combining the Drawing API with the PDF Viewer component.


Generate the PDF as usual through the kendo.drawing.drawDOM() method, and when the promise is resolved, in the done method, use the fromFile method of the PDF viewer 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 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
Not finding the help you need? Improve this article