This is a migrated thread and some comments may be shown as answers.

Problem with drawingDOM and IE11

6 Answers 148 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
Yan St-Yves
Top achievements
Rank 1
Yan St-Yves asked on 04 Aug 2017, 05:16 PM

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!

6 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 08 Aug 2017, 12:21 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Erwin
Top achievements
Rank 1
answered on 02 Nov 2018, 06:37 PM
Hi. I'm having the same exact issue. What was the resolution for the benefit of the community? Thanks.
0
Marin Bratanov
Telerik team
answered on 06 Nov 2018, 12:13 PM
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
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.
0
Erwin
Top achievements
Rank 1
answered on 06 Nov 2018, 02:35 PM

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

 

0
Marin Bratanov
Telerik team
answered on 08 Nov 2018, 02:57 PM
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
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.
0
Erwin
Top achievements
Rank 1
answered on 08 Nov 2018, 07:06 PM
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. 
Tags
Drawing API
Asked by
Yan St-Yves
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Erwin
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or