Preview Export API in PDF Viewer

Environment

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

Description

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.

Solution

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="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<script>
    window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
</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>
    var viewer = $("#pdfViewer").kendoPDFViewer({
      pdfjsProcessing: {
        file: ""
      },
      width: "100%",
      height: 500
    }).getKendoPDFViewer();

    $("#export-pdf").click(function() {
        // Convert the DOM element to a drawing 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
Not finding the help you need? Improve this article