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

Background image wont export from Kendo

11 Answers 435 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
Congyuan
Top achievements
Rank 1
Congyuan asked on 11 Jul 2016, 07:20 PM

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

11 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 13 Jul 2016, 02:26 PM

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

 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Congyuan
Top achievements
Rank 1
answered on 16 Jul 2016, 11:18 PM
Thank you so much.Got you.
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 02 Dec 2019, 08:27 PM
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. 
0
Alex Hajigeorgieva
Telerik team
answered on 04 Dec 2019, 12:06 PM

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

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
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 04 Dec 2019, 02:46 PM

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. 

0
Alex Hajigeorgieva
Telerik team
answered on 06 Dec 2019, 06:59 AM

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

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
Aaron
Top achievements
Rank 1
answered on 07 Apr 2021, 07:49 PM
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.
0
Dimitar
Telerik team
answered on 09 Apr 2021, 09:01 AM

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:

Regards,
Dimitar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Aaron
Top achievements
Rank 1
answered on 09 Apr 2021, 06:21 PM

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.

0
Aaron
Top achievements
Rank 1
answered on 09 Apr 2021, 06:25 PM
meant base64, not binary.
0
Dimitar
Telerik team
answered on 13 Apr 2021, 06:00 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Drawing API
Asked by
Congyuan
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Congyuan
Top achievements
Rank 1
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Alex Hajigeorgieva
Telerik team
Aaron
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or