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

ExportPDF format and image issues

16 Answers 476 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
steve
Top achievements
Rank 1
steve asked on 12 Feb 2015, 06:13 PM
I am using the the examples on this page (http://demos.telerik.com/kendo-ui/pdf-export/index) to export my view to pdf.  I noticed that the image did not export with the pdf also the  fields are over lapping after export.  Is there a property or style attribute I need to use to fix this?


16 Answers, 1 is accepted

Sort by
0
steve
Top achievements
Rank 1
answered on 12 Feb 2015, 06:31 PM
Never mind about the overlapping fields, it is because I was using DisplayFor when I change it to labels it worked.  I am still have a problem with the image though.

Is there something special I have to do for the image tage?
            <img src="../../Content/images/logo.png" alt="Logo" />

0
Mihai
Telerik team
answered on 16 Feb 2015, 03:25 PM
Hi,

The tag is correct and if the image is displayed in your browser, then it should definitely show up in the PDF.  One situation when an image could fail to display in PDF is when it is hosted on another domain and the server is lacking the permissive cross-origin HTTP headers -- but that doesn't seem to be your case, since you're using a relative URL.

A fix related to images (affected Firefox only) has been pushed recently, so if possible please try with the latest internal build.  If you still encounter the issue please post a minimal test case here: http://dojo.telerik.com/.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
steve
Top achievements
Rank 1
answered on 18 Feb 2015, 07:52 PM
I am using the latest version already. UI for ASP.NET MVC 2014.3 1411

Unless it is the KendoUI perfession version I need
0
Mihai
Telerik team
answered on 19 Feb 2015, 09:37 AM
Hi Stephen,

Here's a sample that demonstrates it works: http://dojo.telerik.com/@mishoo/iyUVA

Although the image is hosted on another domain, it works because the server on that domain includes the proper access control headers.

Lacking a way to reproduce your issue I'm afraid I can't help.  If you still can't get it to work please provide some sample code.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
steve
Top achievements
Rank 1
answered on 27 Feb 2015, 12:42 AM
The issues seems to be related to size of the form. If i use my lap top i can see the image on the pdf.  When I change the width of a div under the image from 700 to 900 it disappears.  When I changed it back the image came back.  

I am also still dealing with text over lapping.  Is there a specific tag I should use to display Text in?
0
Mihai
Telerik team
answered on 02 Mar 2015, 08:47 AM
Hi,

No special tag required for text, but you must explicitly declare TrueType fonts.  Please see the relevant documentation section.

Note that the DejaVu fonts (Sans, Serif, and Mono) are bundled with Kendo and the @font-face declarations are already present in kendo.common.css, so if you decide to use these fonts you can simply add something like this to your CSS:

    body { font-family: "DejaVu Sans" }
    pre, code { font-family: "DejaVu Mono" }

If you'd like to use other fonts, however, you must provide the TTF-s for the PDF export to match the browser display.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
steve
Top achievements
Rank 1
answered on 02 Mar 2015, 04:01 PM
That seems to have fixed the issue. Thanks
0
steve
Top achievements
Rank 1
answered on 16 Mar 2015, 03:31 PM
During testing I noticed that with internet explore the text is not over lapping and looks correct, but the image is gone.  If i export to pdf in chrome then the image is there and the text starts to over lap again.  I am wondering if the issue is the style attribute "float: right"?  When the images is put on the form it mashes the text?  
0
Mihai
Telerik team
answered on 18 Mar 2015, 11:53 AM
Hi,

There have been many fixes and improvements in the PDF generation and one fix in particular is related to overlapping text in Firefox (and sometimes Chrome, although I could only reproduce that in Chrome on Windows XP).  A new release should be out very soon (possibly today), so please retry after upgrading.

If it still happens, please reopen this ticket and if possible post some code to demonstrate the issue.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
steve
Top achievements
Rank 1
answered on 18 Mar 2015, 09:23 PM
It fixed the issue with chrome.  Internet explore 11 (on win7) still doesn't want to load the image.  I will look into it more and if I still cannot get it to work I will up load some code.
0
Mihai
Telerik team
answered on 20 Mar 2015, 04:27 PM
Hello,

It seems IE has various issues with CORS, even when the server is correctly configured.  I was able to reproduce the issue with IE10 / Windows7 on the sample I sent earlier.  However, the image does show up with IE11 / Windows8.1 -- although there I get a warning in the console when I try to run it: "SEC7131: Security of a sandboxed iframe is potentially compromised by allowing script and same origin access.", and the DejaVu font is not correctly displayed in the page, though it gets used in the PDF.

So my question is: are you hosting images or fonts on another domain? -- if so, it appears IE behaves erratically and there are no known solutions at the moment.

If you can reproduce the issue with a locally hosted image (i.e. on same domain) please do send us a test case.  It can be a small ZIP file containing the image and the HTML (since you cannot upload images on dojo.telerik.com).

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mihai
Telerik team
answered on 24 Mar 2015, 11:19 AM
Hi Stephen,

FYI, I pushed a workaround that should help with cross-domain images on IE10.  It will be available in the next internal build.

As I previously said, I could never reproduce the issue with IE11.

As for IE9, it seems that it's a lost case -- if you need to support IE9 then you must host all images and fonts to be embedded in the PDF on the same domain as the application.  It is not possible to make binary cross-domain requests and fetch the data in IE9.  I will update the "known limitations" list about this.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
steve
Top achievements
Rank 1
answered on 24 Mar 2015, 02:05 PM
I happens locally and when published to the server.  I will try to create a sample project later this week
0
Mihai
Telerik team
answered on 24 Mar 2015, 04:24 PM
Hi,

Thank you.  Having a reproducible demo will help a lot debugging the issue.  You might want to wait for the next internal build to see if the latest fixes mitigate the problem.

If you send a sample, please try to keep it simple.  I don't need a whole ASP.NET project (it would actually make it harder), just a plain HTML and the image will do.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Isabelle
Top achievements
Rank 1
answered on 28 Jan 2019, 10:02 AM

Hi 

I have the same problem that Steve had on exporting images on PDF 

Images are very well displayed on my Listview but when I export to PDF it dosnot work, the PDF is NOT generated, and there is no error. If I remove the image the PDF is OK....

I tried your example : http://dojo.telerik.com/@mishoo/iyUVA and it dosnot work on CHROME 

I join the result 

thank you for your help 

Isabelle 

 

 

 

 

0
Viktor Tachev
Telerik team
answered on 30 Jan 2019, 07:50 AM
Hello Isabelle,

I have replied to your query in the support ticket, however, I will also paste the reply here for clarity.

The PDF from the example does not show image because the url from which the image is retrieved redirects to HTTPS and does not allow CORS. However, if the server returning the image is configured to allow CORS the picture will be shown in the PDF file. Check out the modified example below for illustration.

http://dojo.telerik.com/IyAlUKaZ/2

If you would like additional information on CORS you would find the CORS Data Fetching article interesting.


Regards,
Viktor Tachev
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.
Tags
Drawing API
Asked by
steve
Top achievements
Rank 1
Answers by
steve
Top achievements
Rank 1
Mihai
Telerik team
Isabelle
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or