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

Unable to export div with overflow property to pdf

1 Answer 604 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
Wei Shiong
Top achievements
Rank 1
Wei Shiong asked on 18 Dec 2016, 05:21 PM

Hi,

   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>
            <div id="grid"></div>
            <div id="myDiv" style="height:100vw;width:5vw;background:red"></div>
          </div>
        </div>
 </div>

 

and setting the selector to Test :

$(".export-pdf").click(function() {
        // Convert the DOM element to a drawing using kendo.drawing.drawDOM
        kendo.drawing.drawDOM($("#Test"))
        .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
            kendo.saveAs({
                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,

CH

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 20 Dec 2016, 04:53 PM
Hello,

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

http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#getting-started

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.

Regards,
Stefan
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.
Tags
Drawing API
Asked by
Wei Shiong
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or