Export multipage PDF with jQuery 3.+

[Matthijs]

Hi,

For a project I'm required to use Bootstrap 4, which in turn requires jQuery 3.+ (currently using 3.4.1).

While Kendo UI officially only supports jQuery 1.12.4, I've been using jQuery 3.+ without any problems, until now.

 

I'm exporting HTML into PDF using the Kendo UI Drawing functionality (snippet below). This snippet generates the PDF document with content without problems when using jQuery 1.12.4 or 2.2, but fails to add content when using jQuery 3.+. I've tried versions 3.0.0, 3.3.1 and 3.4.1 without success. Browsers I've tested: Firefox 67/68, Internet Explorer 11 and Chrome 75.

Unfortunately I'm unable to downgrade jQuery version due to Bootstrap 4 requirement, and would like to ask how I can solve this issue using jQuery 3.4.1 (using Kendo UI for MVC version 2019.2.619).

 

Thanks, Matthijs

 

<div class="container">
   <div class="btn btn-primary" id="pdf-export">PDF Export</div>
   <div class="export-to-pdf">
      <div>This is PDF content for page 1.</div>
   </div>
   <div class="export-to-pdf">
      <div>This is PDF content for page 2.</div>
   </div>
   <!-- etc.. -->
</div>

 

$(document).ready(function () {

    $("#pdf-export").click(function () {
        createPDF();
    });

});

function createPDF()
{
    kendo.pdf.defineFont({
        "Lato": "/Content/Fonts/Lato-Regular.TTF",
        "Lato|Bold": "/Content/Fonts/Lato-Bold.TTF",
        "Lato|Bold|Italic": "/Content/Fonts/Lato-BoldItalic.TTF",
        "Lato|Italic": "/Content/Fonts/Lato-Italic.TTF"
    });

    var root = new kendo.drawing.Group();

    $('.export-to-pdf').each(function () {
        kendo.drawing.drawDOM(this)
            .then(function (group) {
                group.options.set("pdf", {
                    margin: {
                        left: "1cm",
                        right: "1cm",
                        top: "1cm",
                        bottom: "1cm",
                    }
            });
            root.append(group);
        });
    });
    root.options.set("pdf", {
        multiPage: 'true'
    });

    kendo.drawing.exportPDF(root).done(function(data) {
        kendo.saveAs({
            dataURI: data,
            fileName: "DocumentName.pdf",
            proxyURL: "@Url.Action("PdfExport")",
            forceProxy: true
        });
    });
}

 

[Ivan Danchev]

Hi Matthijs,

The following modification of the export logic allows the content to be exported with jQuery 3.4.1 loaded:

var root = new kendo.drawing.Group({
  pdf: {
    multiPage: true
  }
});

$('.export-to-pdf').each(function(index, element) {
  kendo.drawing.drawDOM(this)
    .then(function (group) {
      group.options.set("pdf", {
        margin: {
          left: "1cm",
          right: "1cm",
          top: "1cm",
          bottom: "1cm",
        }
      });
        root.append(group);
      if (index === ($('.export-to-pdf').length - 1)) {
        return kendo.drawing.exportPDF(root, {});
      }
  })
  .done(function(data) {
    kendo.saveAs({
      dataURI: data,
      fileName: "DocumentName.pdf",
      proxyURL: "@Url.Action("PdfExport")",
      forceProxy: true
    });
  });
});

Could you give it a try and let us know whether the export is successful at your end?

On a side note, the latest Kendo UI version supports jQuery 3.4.1 (see the supported versions in this documentation article).

Regards,
Ivan Danchev
Progress Telerik

[Matthijs]

Hi Ivan,

Thank you for the snippit.

It works, and I'm now able to export multipage PDF using jQuery 3.4.1.

Thanks, Matthijs

[Ivan Danchev]

Hi Matthijs,

Thank you for the follow up. I am glad the suggested approach worked out.

Regards,
Ivan Danchev
Progress Telerik