ExportPDF format and image issues

[steve]

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?

[steve]

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" />

[Mihai]

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

 

 

[steve]

I am using the latest version already. UI for ASP.NET MVC 2014.3 1411

Unless it is the KendoUI perfession version I need

[Mihai]

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

 

 

[Garun]

We are facing the same issue as we are trying to generate the bellow image in PDF but its not showing in PDF

https://www.hotspex.com/revamp-images/image-b.jpg

 

 

 kendo.drawing.drawDOM("#MReport", {
                paperSize: [1300, 870],
                margin: "2cm",
                landscape: false,
                portrait: true,
                multiPage: true,
                scale: 0.9,
                keepTogether: "#MReport"
            }).then(function (group) {
                kendo.drawing.pdf.saveAs(group, "SurveyBreakthrough.pdf");
            });

 

Thanks

Garun

 

 

[steve]

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?

[Mihai]

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

 

 

[steve]

That seems to have fixed the issue. Thanks

[steve]

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?  

[Mihai]

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

 

 

[steve]

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.

[Mihai]

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

 

 

[Mihai]

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

 

 

[steve]

I happens locally and when published to the server.  I will try to create a sample project later this week

[Mihai]

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

 

 

[Isabelle]

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 

 

 

 

 

[Viktor Tachev]

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

[Garun]

We are facing the same issue as we are trying to generate the bellow image in PDF but its not showing in PDF

https://www.hotspex.com/revamp-images/image-b.jpg

 

 

 kendo.drawing.drawDOM("#MReport", {
                paperSize: [1300, 870],
                margin: "2cm",
                landscape: false,
                portrait: true,
                multiPage: true,
                scale: 0.9,
                keepTogether: "#MReport"
            }).then(function (group) {
                kendo.drawing.pdf.saveAs(group, "SurveyBreakthrough.pdf");
            });

 

Thanks

Garun

 

[Ianko]

Hi Garun,

Note that this is again CORS issue and this cannot be somehow resolved using client-side logic. Please refer to the reply Victor Tachev posted. This is a security matter and to resolve it you should either use images/assets that are served without SSL  or ensure that the server serving the assets is appropriately configured to allow CORS.