Problem with drawingDOM and IE11

[Yan St-Yves]

I have the following function which works perfectly in Chrome but not IE11.

 

kendo.drawing.drawDOM($(".pagePDF"), { forcePageBreak: ".page-break" })
        .then(function (group) {
            var PAGE_RECT = new kendo.geometry.Rect([0, 0], [mm(215.9 - 25), mm(279.4 - 25)]);

            var content = new kendo.drawing.Group();
            content.append(group);

            //kendo.drawing.align(content, PAGE_RECT);
            kendo.drawing.fit(content, PAGE_RECT);
            kendo.drawing.pdf.saveAs(group, $("#Nom").val() + ".pdf");

            return kendo.drawing.exportPDF(content, {
                paperSize: "Letter",
                margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
                Landscape:true
            });
        })

 

It starts working in IE11 if I take out the forcePageBreak. If there are any properties, the "then" instruction is never executed. There is just nothing happening.

And, again, it is working fine in Chrome.

 

Can anybody help me with this problem?

Thanks in advance!

[Ivan Danchev]

Hi Yan,

I replied to the support thread you started with the same subject. I suggest we continue the discussion in it, in order to avoid thread duplication. Once we narrow down what causes the export to fail in IE11 in your specific scenario we can summarize our findings in this thread.

Regards,
Ivan Danchev
Progress Telerik

[Erwin]

Hi. I'm having the same exact issue. What was the resolution for the benefit of the community? Thanks.

[Marin Bratanov]

Hello Erwin,

It looks like the OP resolved the issue on their own, because we were not able to reproduce and investigate it. Here are a couple of suggestions I can provide you with:

• Make sure your IE is not running in Compatibility Mode. The following article is a good starting place for that investigation, even though it is written for the UI for ASP.NET AJAX product, the same principles apply: https://www.telerik.com/support/kb/aspnet-ajax/details/problem-in-ie-works-fine-in-other-browsers.
• See if the .fail() method of the promise is called and provides any information as to what's happening, something like:

  kendo.drawing.drawDOM($(".pagePDF"), { forcePageBreak: ".page-break" })
  .then(function(group) {
     //...
  })
  .fail(function(data) {
    debugger;
    //check data
  });

 

Regards,
Marin Bratanov
Progress Telerik

[Erwin]

Hi Marin thanks for your follow up. I made sure IE was not in compatibility mode (running IE11 version 11.0.9600.19155). I also added the .fail method of the promise as suggested but it's never called. 

I seem to have isolated it down to images. If the div containing the data to be exported contains multiple images, the file isn't generated in IE. However, it works fine in Chrome. Could this have anything to do with size/compression? 

I created the following example in Dojo which demonstrates the issue. 

https://dojo.telerik.com/OWowIJIt/3

 

[Marin Bratanov]

Hi Erwin,

Thanks for the sample. The problem is coming from the broken images - <img src="" />. They don't return successfully when requested by the export operation and so break it. The same would apply for an URL that is wrong or does not return successfully for another reason (like unauthorized) - <img src="I-do-not-return-properly" />

I am attaching below a local page I built that seems to work fine for me (and also works in a dojo). It seems that the iframe the dojo uses somehow hides some errors, so I'd suggest using such a local page to test things out so you can monitor the console. I also left a few comments on the expected behavior in the CSS and in the pdf options.

I must also note that this content may not be exported on multiple pages as expected (of course, that depends on the expectations). The page breaks must occur within text nodes, and in this case we have tables within tables, and so each "card" will stay together or be truncated: https://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Page.

Last but not least, I am logging this behavior for research and you can monitor its status in the following page: https://github.com/telerik/kendo-ui-core/issues/4658. Your Telerik points have also been updated for this report.

Regards,
Marin Bratanov
Progress Telerik

[Erwin]

Thanks Marin. I modified my code based on your suggestion to remove the empty <img> tags from the HTML markup and that solved the pdf export issues in IE11. Everything is working great now. Thanks again for your help.