Exporting to images & print is broken in beta 43

dswitzer commented 6 years ago

I can no longer export a chart to an image or print using beta 43. It works fine in beta 42.

In Chrome I see the following error:

amcharts.min.20180806105048.js:19 Uncaught (in promise) DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at e.<anonymous> (http://dev.local/amcharts/amcharts.min.20180806105048.js:19:467316)
    at http://dev.local/amcharts/amcharts.min.20180806105048.js:19:2839
    at Object.next (http://dev.local/amcharts/amcharts.min.20180806105048.js:19:2944)
    at http://dev.local/amcharts/amcharts.min.20180806105048.js:19:1879
    at new Promise (<anonymous>)
    at Object.e.b (http://dev.local/amcharts/amcharts.min.20180806105048.js:19:1656)
    at e.fontsToDataURI (http://dev.local/amcharts/amcharts.min.20180806105048.js:19:467148)
    at e.<anonymous> (http://dev.local/amcharts/amcharts.min.20180806105048.js:19:464849)
    at http://dev.local/amcharts/amcharts.min.20180806105048.js:19:2839
    at Object.next (http://dev.local/amcharts/amcharts.min.20180806105048.js:19:2944)

In Firefox, I see:

Unhandled promise rejection DOMException: "The operation is insecure." amcharts.min.20180806105048.js:19:612587
I/</e<
http://dev.local/amcharts/amcharts.min.20180806105048.js:19:612587
t.exports
http://dev.local/amcharts/amcharts.min.20180806105048.js:19:556377
I/<
http://dev.local/amcharts/amcharts.min.20180806105048.js:19:612464
t.exports
http://dev.local/amcharts/amcharts.min.20180806105048.js:19:554196
<anonymous>
http://dev.local/amcharts/amcharts.min.20180806105048.js:19:429588
b
http://dev.local/amcharts/amcharts.min.20180806105048.js:19:429446
v
http://dev.local/amcharts/amcharts.min.20180806105048.js:19:429466

I suspect this is related to the Export now correctly uses external fonts included via @import, such as Google Fonts fix that was implemented.

martynasma commented 6 years ago

Yes, that might be the case. That update was not yet fully ready to go love.

That said, I can't reproduce this error myself.

Do you have a pen that acts like this, or does this happen on your local install?

dswitzer commented 6 years ago

Here's an example:

https://codepen.io/anon/pen/EpJbJe

The problem is related to the tags. I suspect it's ultimately a CORS issue, since the CSS files are stored on remote site. You have to remove both link tags in order for the exporting to work.

martynasma commented 6 years ago

Thanks. This helps!

Obviously a CORS issue since browser seems to be preventing access to cssRules.

In any case, we are revamping export as we speak. I'll make sure to run this particular demo before we get it out.

martynasma commented 6 years ago

OK, so I did some preliminary testing. This is indeed is caused by including web fonts using <style> tags from different domain. We will investigate if we can work around it.

In the interim, the solution would be to use @import directive in your own CSS.

This should work for Google Fonts.

But probably won't for bootstrapcdn.com so you might need to find some alternative cdn for font-awesome.

I know it's not the ideal solution, but something you can work with until we figure out if we can fix it the right way.

dswitzer commented 6 years ago

Any update on this (outside of the previous workaround)?

I'd like to update to the latest beta, but this is blocking me.

What if there was just a try/catch around whatever code is trying to inject the CSS that spits out a CORS message to the console, but goes ahead with the export anyway?

That way the CORS issue doesn't break exporting, but it gives something useful in the console that explains there's an issue.

martynasma commented 6 years ago

Could you please hold on just a little bit longer?

We almost got export revamped. Hopefully we'll go to release at some point later today, or Monday.

Would that timing work for you?

dswitzer commented 6 years ago

Yes, that would be fine. Thanks!

martynasma commented 6 years ago

Just a heads up, the beta.47 just released does not contain export update. It's not quite ready.

We're going to make that release early next week.

martynasma commented 6 years ago

Fixed in 4.0.0-beta.48.

[4.0.0-beta.48] - 2018-08-31

Added

useWebFonts setting in Export. Allows disabling of download of web fonts when exporting.
useRetina setting in Export. Images are now exported scaled up on retina displays by default. Set useRetina = false to disable.

Changed

Export fallback mechanism for older browsers changed from FabricJS to canvg, which is much lighter and has better text formatting support.
On retina displays images will now export supersized in order not to lose quality. Set useRetina = false to disable.
amCharts logo will now auto-hide on supersmall chart sizes.

Fixed

Cursor was zooming the chart even if drag motion was performed on an external element positioned over the chart.
Cursor was not hidden when it was no longer hovering the chart area if chart had no padding.
urlTarget was not carried over from ListTemplate template to new items.
Cursor could cause chart to freeze up on a DateAxis with empty cells in the axis' beginning or end.
Export will now correctly handle web fonts, such as Google Fonts. Please note that FontAwesome is not supported, since they forbid any kind of usage, except inclusion via CSS.

Full change log.

Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.

amcharts / amcharts4