Image not exporting with PDF Export in Chrome Browser same is working well in Firefox Browser

[Srinivas]

Hi Team,

Please check following link

https://stackblitz.com/edit/angular-7buwuy?file=app/app.component.ts

I have added 2 buttons
one button Save as PDF
another one is Direct Printer
Direct Print giving me expected result which is not giving by kendo-pdf-export

1. Auto Print will not work with Google Chrome that is clear
2. Most importantly Image not exporting in PDF when I'm using the google chrome browser same is working with Firefox! why?

What is the issue?

Regards,

Srinivas

[Martin]

Hello Srinivas,

Thank you for the provided details.

It looks like the problem comes from the StackBlitz. I tested the same markup in an isolated Angular 12 project and the image was exported correctly. Please check the screencast.

https://screenrec.com/share/SlRUsEbNjD

Regarding the autoPrint option, the image will be exported if it's downloaded and added to the project, e.g.:

  <img _ngcontent-fnj-c783="" style="width: 84px;" src="../assets/my-logo.png">

https://screenrec.com/share/XSPHYQRFmG

Please keep in mind that the "@progress/kendo-drawing"  package needs to be at least v1.9.0.

I hope this sheds some light on this case. Let me know if I am missing something or in case any further questions come up.

Regards,
Martin
Progress Telerik

[Srinivas]

Hi Martin,

I attached one small project with this and this project reproducing my issue.
Please check that attachment and let me know if I'm wrong anywhere.
There is no problem with StackBlitz. If it is just trick to ignore my point then my attachment answer you.
Images comes dynamically through API. So, there is no chance that image can be added in Angular project.
Let me know if Telerik can't support APIs for images (it is just simple URL)
I'm already using v1.14.0 for @progress/kendo-drawing

Anyone else can light on this?

Regards,
Srinivas

 

[Martin]

Hi Srinivas,

Thank you for the provided demo.

Initially, I was thought that the issue was caused by the StackBlitz environment. But checking the initially provided demo again, export the image as expected:

https://stackblitz.com/edit/angular-7buwuy

Typically exporting server images might throw CORS policy error and the same is thrown in this case as well:

 

In general, such CORS-related error is generic. Please check the following article on CORS for some more details on when such an error is thrown:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Each time a web client makes a remote request, then the response should contain the appropriate CORS headers that will allow the client to receive the response from the particular remote server. That implementation is introduced due to security measures.

However, the image wouldn't be exported by the PDF Export if it doesn't have properly setup Access Control Allow Headers:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

In general, there are no known issues exporting images linked through the src attribute. The demo which shows how to limit the image resolution in the following article also uses a remote request to get the image:

https://www.telerik.com/kendo-angular-ui/components/pdf-export/embedded-images/#toc-limit-image-resolution

The provided isolated runnable project exports the image on my side as expected. Here is a screencast:

https://screenrec.com/share/gpCQuUEMB7

Let me know if I can provide any further assistance for this case.

Regards,
Martin
Progress Telerik

[Srinivas]

Hi Martin,

You got the issue but your solution is too lengthy.
Can you tell me how you got solved in short.
Because sometimes lengthy process also confuse to developer.

 

Regards,

Srinivas

[Martin]

Hi Srinivas,

Frankly, I just opened the dev console to check the example for any JavaScript errors and clicked the Export to PDF button. Then the image was included in the exported file, throwing a CORS policy error.

Here I want to mention that testing the same example but with other image URL does not have any issues. For example, I used this url image, shown in our demo (no CORS errors).

Having said that the issue should be fixed in the server-side controller returning the image.