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.
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/.
Straight to the points:
<telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
<PdfSettings
PaperSize="A6"
Landscape="true" MarginRight="10mm" MarginBottom="10mm" MarginTop="10mm" MarginLeft="10mm" FileName="MyFile.pdf" />
</telerik:RadClientExportManager>
<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>
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.