Background image wont export from Kendo

[Congyuan]

Seems Kendo is still not able to export image/PDF with the background. Any idea about this?

Dojo is here:  http://dojo.telerik.com/@jcbowyer/exuZi

[Dimo]

Hello Congyuan,

Images can be exported only if the browser is able to load them during exporting via Ajax, or if CORS is allowed (which usually isn't). The following documentation section explains this:

https://docs.telerik.com/kendo-ui/framework/drawing/limitations-browser-support#cross-origin-resources

In this particular case, the web server, which hosts the image, does not allow cross-domain Ajax requests and you will see an error in the browser console during export:

Image from origin 'https://static.pexels.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://runner.telerik.io' is therefore not allowed access.

Regards,
Dimo
Telerik by Progress

 

 

[Congyuan]

Thank you so much.Got you.

[Lee]

Has anyone figured out how to get around this yet? I am having an issue exporting my Kendo UI map using OpenStreetMap to a pdf. I am getting the cors error mentioned above. 

[Alex Hajigeorgieva]

Hi, Lee,

The Open Street Map tiles come with CORS headers and I am able to successfully export them to PDF. Are you using the HTTPS protocol in your Map definition?

Here is a runnable example for your reference:

https://dojo.telerik.com/@bubblemaster/iFAsiSUh/2

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Lee]

It looks like the map style that I am using does not allow CORS. The urlTemplate for the map I am using is: https://tiles.wmflabs.org/bw-mapnik/#= zoom #/#= x #/#= y #.png

This works when I load the page but not when I try to export the map to PDF. 

[Alex Hajigeorgieva]

Hello, Lee,

The OpenStreetMap data is free but their tile servers are not according to the information I found online and you should get familiar with their policy and license here:

https://operations.osmfoundation.org/policies/tiles/

It looks like you can create and host your own proxy with the tiles which will give you the option to provide the CORS headers that are necessary to embed the tiles in the PDF documents.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Aaron]

I am also having this issue grabbing pictures from Azure blob storage. The page loads fine - the images load in the browser perfectly. I do not get a cors error until I hit the Export button. When it goes to create the pdf it throws the error. Is there a way around this? It seems similar to others, but maybe not exactly the same.

[Dimitar]

Hello Aaron,

Fonts and images that are hosted on different domains are exported/embedded only if the server provides permissive Cross-Origin HTTP Headers. The error that you are observing is informing that the CORS headers are not configured for this domain. To get around this, you should correctly configure CORS in Azure. Refer to the following resource for additional information:

• https://docs.microsoft.com/en-us/rest/api/storageservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services

Regards,
Dimitar
Progress Telerik

[Aaron]

Hi @Dimitar, thanks for the reply. I'm afraid I am still unable to get past this. Azure has actually made it much simpler to set CORS rules on a blob - and I have done this; however I am still getting a cors error when the pdf exporter attempts to download the pictures.

Please see Azure-Cors.png for the rules I have added to our storage account.

 

I have also enabled cors in our .net core 5 app per microsoft msdn article. 

services.AddCors(options =>

            {

                options.AddPolicy(name: MyAllowSpecificOrigins,

                                  builder =>

                                  {

                                      builder.WithOrigins("https://digitalcapreports.azurewebsites.net/",

                                                          "https://digitalcapreports.azurewebsites.net",

                                                          "https://devabsstorage.blob.core.windows.net",

                                                          "https://devabsstorage.blob.core.windows.net/",

                                                          "https://localhost:44371/",

                                                          "https://localhost:44371");

                                  });

            });

//the formatter is broken and I can't type after the code block Above is ConfigureServices, below is Configure - again per msdn.

 app.UseCors(MyAllowSpecificOrigins);

 

So, I have CORS rules set up on my blob to allow my origins. I have cors enabled in my application. The images are STILL downloading just fine on page load. And when I click the export button I still get the cors error.

Am I doing anything wrong? Does anything jump out at you that I can try? I'm about to just store these images locally as binary and populate it old school because your control doesn't work.

[Aaron]

meant base64, not binary.

[Dimitar]

Hello Aaron,

I would suggest to check if the Azure service has been restarted and the expected headers are present when images are being downloaded. It might be the case that new changes have not been synced.

Could you also confirm if you are still receiving the CORS error from Azure in the browser with the new configuration that you have applied ? If this is the case, then this means that the headers are not configured correctly.

Regards,
Dimitar
Progress Telerik