Vertically scrolled DIV Export to PDF

5 posts, 0 answers
  1. Eric
    Eric avatar
    12 posts
    Member since:
    Aug 2010

    Posted 02 Jan Link to this post

    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.

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4225 posts

    Posted 02 Jan Link to this post

    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.
  3. Eric
    Eric avatar
    12 posts
    Member since:
    Aug 2010

    Posted 14 May in reply to Marin Bratanov Link to this post

    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 highchart

    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 highchart page

     

     

  4. Eric
    Eric avatar
    12 posts
    Member since:
    Aug 2010

    Posted 15 May in reply to Eric Link to this post

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

     

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4225 posts

    Posted 17 May Link to this post

    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.
Back to Top