Get Free Trial
Get Free Trial

IE11 Export Not Working, Chromium Export to Image Not Working

Answered
Serban Vasile asked on September 25, 2019

Version 2.7.15 (build 09/24/2019 04:50:34)
It now works with IE11 copying to clipboard.
Unfortunately, this version broke ALL exports in IE. Nothing there works. Clicking on any menu item for Export in the toolbar doesn’t execute anything. No console errors.
Behavior is unchanged for Chromium browsers between version 14 and 15.
The problem with Chromium browsers is “Export to Image” which generates a blank file. That happened for 3-4 versions now.
Regards,
Serban

12 answers

Public
Vera Didenko Flexmonster September 26, 2019

Hello, Serban,
 
Thank you for reaching out to us.
 
We have not managed to reproduce the issue. In Internet Explorer 11 on our demos export for all types is working fine on our end.
Our team kindly asks to check whether the export works for you on our demo: https://www.flexmonster.com/demos/pivot-table-js/
Please share your results with us and any errors in the browser’s console that you encounter.
 
We are looking forward to your response.
 
Best Regards,
Vera

Public
Serban Vasile September 30, 2019

Both issues not happening on your demo pages.
Trying to understand what is different in my project (angular 7, web service feeds csv). 
One issue at a time…Chromium based browsers exporting blank png file when exporting to img.
No console errors in developer debug mode.
The one thing I see is that in my project, when exporting to img, a whole refresh of the flex component is triggered, like I would have called the web service with different params. See my attached screenshot…see the call stack…stopped it right before entering my app.component.ts, where I see it calling the onInit code. I don’t see the refresh happening on your demo pages. Or maybe your demo pages are not of that nature, where they would need a refresh.

Attachments:
Clipboard01.jpg

Public
Serban Vasile September 30, 2019

Still Chromium browsers…tried my app outside of the iframe container…all exports, csv, html, etc. worked fine…img failed, same refresh triggered, no console errors…export to pdf, though, failed.
There, a refresh is triggered, same as with the img, but a console error gets registered.
See attachments, screen and debug console…
Just throwing things at you, hope they are related 🙂
 

Public
Serban Vasile September 30, 2019

No issues with Mozilla, both export to img and to pdf work just fine, same app, same report.

Public
Serban Vasile September 30, 2019

Again, these issues with Chromium, happen with Flex 2.7.14 and 2.7.15. Didn’t happen with an older version, couldn’t tell you which one exactly, had a deploy in-between.
Mozilla is fine with either 2.7.14 and 2.7.15

Public
Serban Vasile September 30, 2019

Mozilla NOT triggering a refresh of the report when exporting to img, pdf, by the way.

Public
Serban Vasile September 30, 2019

The issues ARE related, export to img fails in IE, as well. After the failure of the img export, all other exports are left in limbo mode, in IE, that is why I said no export are working. Before trying to export to img, the other exports seem to be working in IE.
Good news is that IE throws an error for the img export failure.
See attached.
Hope you have enough now to figure it out. I did my best to trace it here.

Attachments:
Clipboard04.jpg

Public
Serban Vasile September 30, 2019

Since IE failed in the vendor.js module, attaching it here. It’s a Fiddler archive, saz, pick menu option “load archive” in Fiddler to see it. Had to attach as jpg, otherwise UI here rejects it for upload.

Attachments:
vendor.js.saz.jpg

Public
Ian Sadovy Flexmonster October 2, 2019

Hello Serban,
 
Thank you for the detailed research.
We have verified the export using our Angular sample in Chrome, and it is working well.
Since your application works in IE, we guess it is using polyfills. We have enabled polyfills in our Angular app and still, it works OK in Chrome. Maybe there is an issue with specific Angular configuration or conflict between third-party libraries.
To research further we need a sample for our dev team.
Could you please take a look at the following project (https://github.com/flexmonster/pivot-angular) and recreate the issue with it?
 
Look forward to hearing from you.
 
Thanks,
Ian

Public
Serban Vasile October 8, 2019

OK, we figured it out, the cause…it’s actually our angular project change to use a web component that caused the Chromium browsers to fail export to image. That happened while we switched to a new version of FlexMonster and that is how we thought it was the latter that caused the problem.
Told you that we had noticed that the angular component was re-initializing when your html2canvas was executing. One time, when the browser was busier than normal, even saw a shadow flexmonster image right under the one on the page (the only one declared in the angular project). Since the app component was re-initializing, the div that was supposed to feed the html2canvas was empty at the time of the export, and that explained the 0 byte image.
That observation made us think about the web component we had declared as an envelope on top of the angular app component. Once we disabled the web component, the export worked fine.
For you to reproduce this issue, the conversion to web component of the angular component happens this way (below, commented out web component version) :
In index.html, app-root becomes flexreports-root.


<body>
  <app-root></app-root>
  <!– <flexreports-root></flexreports-root> –>
</body>
</html>

 
In app.module.ts, instead of bootstrapping the app component, we switched it to entryComponent and handled the bootstrap sequence manually, initializing flexreports-root in the constructor.
…..

,
   bootstrap: [AppComponent]
 // entryComponents: [AppComponent]
})
export class AppModule {
  // constructor(private injector: Injector) {
  //   const ecsRuleRootComponent = createCustomElement(AppComponent, {
  //     injector: this.injector
  //   });
  //   customElements.define(‘flexreports-root’, ecsRuleRootComponent);
  // }    
  // ngDoBootstrap() {} 
}

We are testing this in your latest version Version 2.7.16 (build 10/07/2019 13:26:13).

IE11 actually works fine with the web component version for the export to image.
 
Hope this helps you reproduce the issue.
 
Thanks a bunch,
Serban

Public
Vera Didenko Flexmonster October 9, 2019

Hello, Serban,
 
Thank you for providing additional details on your case.
 
Our team will investigate this further and we will get back to you with the results as soon as possible.
 
We will keep you updated.
 
Best Regards,
Vera

Public
Vera Didenko Flexmonster October 10, 2019

Hello, Serban,
 
Thank you for giving us some time to investigate.
 
Our team has created a sample project using the approach you have shared with us.
However, we have not managed to reproduce the issue: export seems to be working fine on our end.
 
Please see the attached pivot-angular-web-component.zip sample project for reference and let us know if there is anything we are missing.
 
Waiting for your reply.
 
Best Regards,
Vera

Please login or Register to Submit Answer