Need a special offer?Find out if your project fits.
+

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

15 answers

Public
Vera Didenko 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/js/pivot-table/
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 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 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 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

Public
Serban Vasile December 6, 2019

Hi Vera,
We loaded the project from the zip file provided by you and ran it here.
It happens in your project, too, the component is re-initialized when the export to image is called.
See the screenshot attached, with a breakpoint on the ngOnInit of the angular component (your project).
The reason it still produces a non-blank image for you is that you are not doing much on the initialization. We are, though...in our constructor we call a web service and stuff like that.
I think you agree that it's a non-acceptable behavior, the re-initialization of the component. That destroys our context that we are trying to export the image from, to say the least.
So, the ball is now in your court.
Knowing your team, we'll get a solution for this quickly. You guys rock!
 
Serban

Attachments:
Clipboard01.jpg

Public
Vera Didenko Vera Didenko Flexmonster December 9, 2019

Hello, Serban,
 
Thank you for your reply and for sharing these details with us.
 
Our team needs some time to research this case further.
We will notify you about the results with the ETA 30th of December.
 
Please feel free to write to us in case further questions arise.
 
Best Regards,
Vera

Public
Dmytro Zvazhii Dmytro Zvazhii Flexmonster December 30, 2019

Hello Serban,
We have completed an investigation of your case and are ready to share the results with you.

As far as we already know that weird behaviour occurs only when certain conditions are fulfilled. The first condition is to use CustomElementRegistry API for rendering purposes. The second one is that such behaviour only occurs when using exporting to the image.

Our export to the image feature is implemented using the html2canvas library. That library operates by creating an Iframe with the entire copy of the original DOM. The html2canvas library uses that copy of the DOM to build an image. There are no script tags in the iframe's web page so no additional operations are performed.

As for CustomElementRegistry API, you can access it only through the window.customElements object. That object has no limitations on its scope and operates not only the document's object but also the iframe's document's object. In such case, when you register flexreports-root tag in CustomElementRegistry, all elements with flexreports-root tag will be found and rendered no matter where they are. So when the DOM is cloned and the new instance of the flexreports-root element appears, it will be rendered with the code bound to your Angular project. As a result, the same code runs twice and breaks the context of your application.
 
We have prepared some recommendations from our side that should help you to handle the situation:
- the first option is to replace CustomElementRegistry with the default Angular rendering approach. That will help to avoid collisions with the iframes.
- in case your application strongly relies on CustomElementRegistry, you can avoid using export to the image feature. Here is the guide of how you can remove it from the Toolbar: https://www.flexmonster.com/doc/customizing-toolbar/
- the last option is to implement own export to the image approach
 
Please let us know if you have any other question.
Regards,
Dmytro

Please login or Register to Submit Answer