如何从 Kendo 电子表格创建内联 PDF 并将其嵌入到 iFrame 中？

Question

我们正在使用 Kendo 电子表格控件来创建发票。我们需要从电子表格生成 PDF 并将该 PDF 显示在 iframe 中以供审阅。 PDF 无法写入磁盘。我们已经尝试了以下代码的多次迭代但没有成功：

// 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()

代码下载 pdf 而不是嵌入它。

这是正确的做法吗？或者，还有其他方法可以从 Kendo 电子表格生成 PDF 并嵌入生成的 PDF 吗？

Answer 1

来自 Telerik 支持：https://www.telerik.com/account/support-tickets/view-ticket?threadid=1138153

您可以简单地在元素中加载生成的 PDF 数据 (base64)，而不是配置 PDF 导出代理目标。为此，您可以使用电子表格 Sheet 对象的 draw() 方法：

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

示例：http://dojo.telerik.com/UVAyu/3

如何从 Kendo 电子表格创建内联 PDF 并将其嵌入到 iFrame 中？

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

html

pdf

kendo-ui

kendo-ui-grid