Exclude Content from PDF Export with Drawing API


Product Progress Kendo UI Drawing API
Operating System All
Browser All
Preferred Language JavaScript


How can I exclude elements within the exported content and prevent them from being exported to PDF?


Elements that you do not want to be exported can be hidden just before the export begins by using CSS and then shown again after the export finishes. This is possible by adding the special k-pdf-export class to the selector of a CSS rule that hides the specified elements. The special class is automatically added to the elements just before the start of the export process and removed when it finishes. Hiding the elements for the duration of the export excludes them from the exported PDF.

    <div id="example">
      <button class='export-pdf k-button'>Export as PDF</button>
        <div class="container">
          Export the container's content, but exclude the next element:
          <h4 class="noExport">Element that will be excluded from export</h4>
      .k-pdf-export .noExport {
        display: none;
      $(document).ready(function() {
          $(".export-pdf").click(function() {
              // Convert the DOM element to a drawing using kendo.drawing.drawDOM
              .then(function(group) {
                  // Render the result as a PDF file
                  return kendo.drawing.exportPDF(group, {
                      paperSize: "a4",
                      margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
              .done(function(data) {
                  // Save the PDF file
                      dataURI: data,
                      fileName: "Example.pdf",
                      proxyURL: "https://demos.telerik.com/kendo-ui/service/export"

For the full implementation of the approach, refer to this Dojo example.

In this article
Not finding the help you need? Improve this article