Vertically scrolled DIV Export to PDF

[Eric]

Hi,

We have a vertically scrolled DIV and we want to export the whole DIV in PDF, we are using ClientExportManger exportPDF, but the only visible part of DIV exported in PDF while we need to export complete DIV in multiple PDF pages. Snapshot attached with a red highlighted scrollbar. How we achieve that goal? Any small sample application would be helpful.

[Marin Bratanov]

Hi Eric,

The following article explains this situation and offers options: https://docs.telerik.com/devtools/aspnet-ajax/controls/clientexportmanager/how-to/wysiwyg-export.

Here is a sample implementation of one of the approaches:

<style>
    #content {
        height: 200px;
        border: 2px solid red;
        overflow: auto;
    }

    #content.k-pdf-export {
        height: auto;
        overflow: initial;
    }
</style>
<telerik:RadClientExportManager runat="server" ID="rcem1">
</telerik:RadClientExportManager>
<asp:Button Text="export to PDF" OnClientClick="getPdf(); return false;" runat="server" />
<script>
    function getPdf() {
        $find("<%=rcem1.ClientID%>").exportPDF($telerik.$("#content"));
    }
</script>
<div id="content">
    <div style="height: 300px; background: yellow;">first content</div>
    <div style="height: 300px; background: green;">second content that is initially hidden</div>
</div>

Regards,

Marin Bratanov
Progress Telerik

[Eric]

Hi Marin,

Thanks for your reply, your provided solution solved our problem of vertical scrollbar issues. Now we face following issues during export to pdf.

1. We are using iFrame with Master Page in our application. We placed "RadClientExportManager" in Master page and used clientside export to pdf with this code "window.parent.exportToPdf($("#container"), "Test");"

2. Above code successfully export to pdf of any div. In above code "#container" is my div which I had used for export to pdf

3. We have a horizontal scrollbar in div(showing in the attached image) while export to pdf only export visible area of the div. How we export all div content(horizontal, vertical)?

4. We are using highcharts in our application. When we give chart div for export to pdf chart not exported only blank page exported. How we export?

5. Please use this RUL https://1drv.ms/u/s!AnrJsIrWjGXu1QNyZvjzO_xks1ag to get the Test.html page which contains

6. It would be great if you prepare a sample application by using the Test.html page in iFrame and create a pdf of that given  page

 

 

[Eric]

Please note that we are using the following method in our Master page for export to Pdf

function exportToPdf(divId, fileName) {

var exportMngr = $find("<%= RadClientExportManager1.ClientID %>");
var pdfSettings = {
fileName: fileName + ".pdf",
proxyURL: document.domain,
PageBreakSelector: ".pageBreak" }
//set the pdf settings
exportMngr.set_pdfSettings(pdfSettings);
exportMngr.exportPDF(divId);
}

 

[Marin Bratanov]

Hi Eric,

The contents of iframe or svg elements are not supported (documented here: https://docs.telerik.com/devtools/aspnet-ajax/controls/clientexportmanager/troubleshooting/known-limitations). In this case we have the <svg> from HighCharts in an <iframe>, so this cannot be exported.

On your third question (We have a horizontal scrollbar in div(showing in the attached image) while export to pdf only export visible area of the div. How we export all div content(horizontal, vertical)?) - you need to remove the scrollbars before exporting.

My previous post shows one way to do this with CSS, and a CSS-only solution is likely to be impossible for the width, as it is limited by its parent elements.

Thus, you can use the client events of the control to change the <div> dimensions so there are no scrollbars (you can also change CSS rules if necessary).
You can make the change in OnClientPdfExporting (https://docs.telerik.com/devtools/aspnet-ajax/controls/clientexportmanager/client-side-programming/events/pdfexporting) and restore original values and layout in OnClientPdfExported (https://docs.telerik.com/devtools/aspnet-ajax/controls/clientexportmanager/client-side-programming/events/pdfexported). Scenarios like this are why they are exposed.

Regards,
Marin Bratanov
Progress Telerik