Completed
Last Updated: 13 May 2022 07:09 by ADMIN
Prakash
Created on: 28 Feb 2017 22:08
Category: UI for ASP.NET AJAX
Type: Feature Request
4
Client Export Manager Control - Accessibility Support
Client Export Manager Control

Export to PDF feature should be improved

1] Exported PDF should be accessible as per Section 508 Compliance. current exported PDF is not readable to accessibility tools like JAWS and Dragon Natural specking tool.

2] Control should have properties to set the width and height of output pdf

3] Multiple page PDF feature should be available.

4] Page Header and Page Footer template should be included to the control.
4 comments
ADMIN
Rumen
Posted on: 13 May 2022 07:09
I am setting the status to Completed, but if the first point is still an issue, we will reopen it.
ADMIN
Rumen
Posted on: 20 Apr 2022 11:28

Hi Prakash,

For #1, do you still experience the reported accessibility issue?

I exported the following content two links and a table with the latest version and the content was read by the screen reader:

<div id="foo">
    <a href="https://www.google.com">Google</a>
    <br />
    <a href="mailto:someone@yoursite.com">Email Us</a>

<table>
  <tr>
    <th>Date</th>
    <td>12 February</td>
    <td>24 March</td>
    <td>14 April</td>
  </tr>
  <tr>
    <th>Event</th>
    <td>Waltz with Strauss</td>
    <td>The Obelisks</td>
    <td>The What</td>
  </tr>
  <tr>
    <th>Venue</th>
    <td>Main Hall</td>
    <td>West Wing</td>
    <td>Main Hall</td>
  </tr>
</table>
    </div>

<telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
</telerik:RadClientExportManager>
<input type="button" onclick="exportElement()" value="export" />

<script type="text/javascript">
    function exportElement() {
        var pdfSettings = {
            fileName: "PDF-Export",
            avoidLinks: false,
            margin: { top: 25, left: 15, bottom: 10, right: 5 },
            paperSize: "A4",
            landscape: "Portrait",
            title: "PDF",
            author: "UserName",
            subject: "Export to PDF",
            keywords: "a keyword",
            creator: "John",
            date: new Date(2015, 10, 25)
        };
        var exp = $find("<%= RadClientExportManager1.ClientID %>");
        exp.exportPDF($telerik.$("#foo"), pdfSettings);
    }
</script>

 

Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

ADMIN
Rumen
Posted on: 27 Jan 2022 11:14

Straight to the points:

  1. The accessibility request has been approved and goes into an Unplanned state.
  2. You can control the output through the PaperSize and Margin properties: 

    <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
        <PdfSettings  
            PaperSize="A6" 
            Landscape="true" MarginRight="10mm" MarginBottom="10mm" MarginTop="10mm" MarginLeft="10mm" FileName="MyFile.pdf" />
    </telerik:RadClientExportManager>

  3. Multipage and Automatic Page Breaking exports are available and described at https://docs.telerik.com/devtools/aspnet-ajax/controls/clientexportmanager/functionality/pdf-multi-page-export
  4. The page header and footer templates are available and you can implement them as shown below:

            <script type="text/javascript">
                function exportElement() {
                    var exp = $find("<%= RadClientExportManager1.ClientID %>");
                    var pdfSettings = {
                        fileName: "PDF-Export",
    
                        margin: { top: 25, left: 15, bottom: 10, right: 5 },
                        paperSize: "A4",
                        landscape: "Portrait",
                        title: "PDF",
                        author: "UserName",
                        subject: "Export to PDF",
                        keywords: "a keyword",
                        creator: "John",
                        template: $telerik.$("#page-template").html(),
                        date: new Date(2015, 10, 25)
                    };
                    exp.exportPDF($telerik.$("#panel-container"), pdfSettings);
                }
            </script>
            <style>
                /*
                Make sure everything in the page template is absolutely positioned.
                All positions are relative to the page container.
            */
                .page-template > * {
                    position: absolute;
                    left: 20px;
                    right: 20px;
                    font-size: 90%;
                }
    
                .page-template .header {
                    top: 20px;
                    border-bottom: 1px solid #000;
                }
    
                .page-template .footer {
                    bottom: 20px;
                    border-top: 1px solid #000;
                }
    
                /*
                Use the DejaVu Sans font for display and embedding in the PDF file.
                The standard PDF fonts have no support for Unicode characters.
            */
                .k-grid {
                    font-family: "DejaVu Sans", "Arial", sans-serif;
                    width: 400px;
                }
            </style>
    
            <div id="panel-container">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis
            libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat,
            cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra
            accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget
            risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl
            tempor sem, in ullamcorper neque mauris in orci.
                </p>
                <p>
                    Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris
            pulvinar molestie accumsan. Vestibulum ante ipsum primis in faucibus
            orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula,
            pharetra quis aliquam sed, scelerisque sed sapien. Class aptent taciti
            sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
                </p>
                <p>
                    Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros
            facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque
            enim, eget sodales lorem condimentum rutrum. Phasellus sem metus,
            ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris
            commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio
            quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique
            arcu ut sapien elementum pellentesque.
                </p>
            </div>
            <script type="x/kendo-template" id="page-template">
            <div class="page-template">
                <div class="header">
                    <div style="float: right">Page #:pageNum# of #:totalPages#</div>
                    This is a header.
                </div>
                <div class="footer">
                    This is a footer.
                    Page #:pageNum# of #:totalPages#
                </div>
            </div>
            </script>
    For more information check out these resources:
Mike
Posted on: 01 Mar 2017 15:03
Per #1 above, to provide Section 508 compliance for kendoPDF (used by the Telerik Rad Client Export Manager Control), we definitely need the PDF to be tagged with the HTML structure exported.  For example, an HTML table converted to PDF should maintain a PDF table structure to allow it to be read and navigated by screen readers and other accessibility tools.  If we try to add a few tags after the PDF is created using the PDF content, it has lost too much information compared to the original HTML.