How to Create an inline PDF from a Kendo Spreadsheet and Embed it in an iFrame?

Question

We're using the Kendo spreadsheet control to create invoices. We need to generate a PDF from the spreadsheet and display that PDF in an iframe for review. The PDF cannot be written to disk. We've tried multiple iterations of the following code without success:

// Create the spreadsheet
let sheet = $('#sheet1').kendoSpreadsheet()
let activeSheet = sheet.activeSheet()

// Add some content
activeSheet.range('A1').value('Invoice')

// Create the iFrame.
$('#pdf_preview').html(`<iframe id="embedded-pdf" name="test.pdf" type="application/pdf" width="100%" height="100%"></iframe>`)

// Set the proxyTarget to the name of the iFrame
sheet.options.pdf.proxyTarget = 'embedded-pdf'

sheet.saveAsPDF()

The code downloads the pdf rather than embedding it.

Is this the correct approach? Or, is there another way to generate PDFs from Kendo spreadsheets and embed the resulting PDF?

Answer 1

From Telerik Support: https://www.telerik.com/account/support-tickets/view-ticket?threadid=1138153

Instead of configuring the PDF export proxy target, you could simply load the generated PDF data (base64) in the element. To do that you could use the draw() method of the Spreadsheet Sheet object:

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);
  });
});

Example: http://dojo.telerik.com/UVAyu/3