This is a migrated thread and some comments may be shown as answers.
Vertically scrolled DIV Export to PDF
4 Answers 54 Views
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 02 Jan 2018, 10:32 AM

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.

4 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 02 Jan 2018, 01:48 PM

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Eric
Top achievements
Rank 1
answered on 14 May 2018, 12:57 PM

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

 

 

0
Eric
Top achievements
Rank 1
answered on 15 May 2018, 09:24 AM

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);          
}

 

0
Marin Bratanov
Telerik team
answered on 17 May 2018, 02:11 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Eric
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Eric
Top achievements
Rank 1
Share this question
or