Edit this page

Exclude Content from PDF Export with Drawing API

Environment

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

Description

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

Solution

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>
        </div>
    </div>
    <style>
      .k-pdf-export .noExport {
        display: none;
      }
    </style>
    <script>
      $(document).ready(function() {
          $(".export-pdf").click(function() {
              // Convert the DOM element to a drawing using kendo.drawing.drawDOM
              kendo.drawing.drawDOM($(".container"))
              .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
                  kendo.saveAs({
                      dataURI: data,
                      fileName: "Example.pdf",
                      proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                  });
              });
          });
      });
    </script>

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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy