Edit this page

Create an Inline PDF from a Kendo Spreadsheet and Embed it in an iFrame

Environment

Product Progress Kendo UI Spreadsheet

Description

How can I generate a PDF from a Kendo UI Spreadsheet and display the PDF in a separate <iframe>?

Solution

Load the generated base64 PDF data in the <iframe> element. To do that, use the draw() method of the Spreadsheet Sheet object. To properly load the data in the <iframe>, opne the following example in the full screen mode of the Dojo.

<input type="button" id="btn" value="PDF export Spreadsheet" />
<div id="spreadsheet" style="width: 100%;"></div>
<div id="pdf_preview" style="height:400px; width:400px"></div>

<script>
  $(function() {
    $('#btn').on('click', function () {
      var spread = $('#spreadsheet').getKendoSpreadsheet();
      var activeSheet = spread.activeSheet();
      activeSheet.range('B1').value('B1-TEST');
      $('#pdf_preview').html(`<iframe id="embedded-pdf" name="invoice.pdf" type="application/pdf" width="100%" height="100%"></iframe>`);
      activeSheet.draw(function (group) {
        kendo.drawing.exportPDF(group)
          .done(function (data) {
          $('#embedded-pdf').attr('src', data);
        });
      });
    });

    $("#spreadsheet").kendoSpreadsheet({
      excel: {
        proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
      },
      pdf: {
        proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
      },
      sheets: [{
        name: "Food Order"
      }]
    });
  });
</script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy