Unable to export div with overflow property to pdf

2 posts, 0 answers
  1. Wei Shiong
    Wei Shiong avatar
    13 posts
    Member since:
    Aug 2012

    Posted 18 Dec 2016 Link to this post


       I'm trying to follow this example, http://dojo.telerik.com/awEvi/2 to export html content to pdf. The original example works but when I modified the div to something like this to contain overflow properties,

    <div class="demo-section k-content export-app wide hidden-on-narrow">
            <div id="Test" style="width:100vw;height:20vw;overflow-y:auto;overflow-x:auto">
              <div class="demo-section content-wrapper wide">
                <div class="demo-section charts-wrapper wide">
                  <div id="users"></div>
                  <div id="applications"></div>
                  <div id="referrals"></div>
                <div id="grid"></div>
                <div id="myDiv" style="height:100vw;width:5vw;background:red"></div>


    and setting the selector to Test :

    $(".export-pdf").click(function() {
            // Convert the DOM element to a drawing using kendo.drawing.drawDOM
            .then(function(group) {
                // Render the result as a PDF file
                return kendo.drawing.exportPDF(group, {
                    paperSize: "auto",
                    margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
            .done(function(data) {
                // Save the PDF file
                    dataURI: data,
                    fileName: "HR-Dashboard.pdf",
                    proxyURL: "//demos.telerik.com/kendo-ui/service/export"


    the content becomes clipped as shown in the attached image.

    Is there any way in which I could export the content within the div without having it clipped?

    Best Regards,


  2. Stefan
    Stefan avatar
    1653 posts

    Posted 20 Dec 2016 Link to this post


    This behaviour is expected, as the Kendo UI PDF Export will export only the rendered part of the container:


    In order to not cut some of the contend, please make sure that the content is currently rendered on the page.

    Let me know if you need additional assistance on this matter.

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top