ExportPDF format and image issues

15 posts, 0 answers
  1. steve
    steve avatar
    81 posts
    Member since:
    Oct 2009

    Posted 12 Feb 2015 Link to this post

    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?


  2. steve
    steve avatar
    81 posts
    Member since:
    Oct 2009

    Posted 12 Feb 2015 Link to this post

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

  3. Kendo UI is VS 2017 Ready
  4. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 16 Feb 2015 Link to this post

    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!
     
  5. steve
    steve avatar
    81 posts
    Member since:
    Oct 2009

    Posted 18 Feb 2015 Link to this post

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

    Unless it is the KendoUI perfession version I need
  6. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 19 Feb 2015 Link to this post

    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!
     
  7. steve
    steve avatar
    81 posts
    Member since:
    Oct 2009

    Posted 26 Feb 2015 in reply to Mihai Link to this post

    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?
  8. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 02 Mar 2015 Link to this post

    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!
     
  9. steve
    steve avatar
    81 posts
    Member since:
    Oct 2009

    Posted 02 Mar 2015 Link to this post

    That seems to have fixed the issue. Thanks
  10. steve
    steve avatar
    81 posts
    Member since:
    Oct 2009

    Posted 16 Mar 2015 in reply to steve Link to this post

    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?  
  11. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 18 Mar 2015 Link to this post

    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!
     
  12. steve
    steve avatar
    81 posts
    Member since:
    Oct 2009

    Posted 18 Mar 2015 in reply to Mihai Link to this post

    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.
  13. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 20 Mar 2015 Link to this post

    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!
     
  14. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 24 Mar 2015 Link to this post

    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!
     
  15. steve
    steve avatar
    81 posts
    Member since:
    Oct 2009

    Posted 24 Mar 2015 in reply to Mihai Link to this post

    I happens locally and when published to the server.  I will try to create a sample project later this week
  16. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 24 Mar 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready