Export multipage PDF with jQuery 3.+

4 posts, 1 answers
  1. Matthijs
    Matthijs avatar
    5 posts
    Member since:
    Jun 2013

    Posted 11 Jul Link to this post

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

     

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1750 posts

    Posted 12 Jul Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Matthijs
    Matthijs avatar
    5 posts
    Member since:
    Jun 2013

    Posted 12 Jul in reply to Ivan Danchev Link to this post

    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

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1750 posts

    Posted 12 Jul Link to this post

    Hi Matthijs,

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

    Regards,
    Ivan Danchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top