New to Kendo UI for Angular? Start a free 30-day trial

Hidden Content

Updated on Nov 21, 2025

You can generate content in Kendo UI for Angular PDF Export, which is otherwise not visible to the user during the PDF export itself. The PDF Export component supports two common approaches for including hidden content in PDF exports.

Dynamic Content Rendering

Render content conditionally before export. Useful for logos or watermarks that load asynchronously or should only appear in the PDF.

Off-Screen Positioning

Position content off-screen using CSS so it is always rendered in the DOM but hidden from view.

The following example demonstrates the two approaches for including hidden content in PDF exports.

Change Theme

Theme

Loading ...

Dynamic Content Rendering

You can render content conditionally by toggling its visibility just before the PDF export triggers. This approach is useful when you want to add content (such as company logos or watermarks) that is loaded asynchronously or should only appear in the exported PDF.

To export dynamically rendered hidden content:

Use conditional rendering @if to control when the content appears in the DOM.

html

<kendo-pdf-export #pdfExport>
    @if (showBranding) {
        <div class="company-header">
            <!-- Your hidden content here -->
        </div>
    }
    <div class="invoice-content">
        <!-- Your visible content here -->
    </div>
</kendo-pdf-export>

Declare a boolean flag and a ViewChild reference to the PDF export component.

typescript

import { ChangeDetectorRef, ViewChild } from '@angular/core';

export class AppComponent {
    public showBranding = false;

    @ViewChild('pdfExport') public pdfExport!: PDFExportComponent;
    
    constructor(private cdr: ChangeDetectorRef) {}
}

Create a custom export method that toggles the flag, forces change detection, and triggers the PDF export manually with the saveAs() method.

typescript

public exportWithDynamicContent(): void {
    this.showBranding = true;
    this.cdr.detectChanges();
    this.pdfExport.saveAs('invoice.pdf');
    this.showBranding = false;
}

Off-Screen Positioning

With this approach, you can position content off-screen using CSS so it is always rendered in the DOM but hidden from view. This method is useful for content that does not require asynchronous loading and can be present in the DOM at all times.

To export content positioned off-screen:

Create a container that holds all the information you want to hide from the user.

html

<div class="off-screen-wrapper">
    <kendo-pdf-export #pdfOffscreen>
        <!-- Your hidden content here -->
    </kendo-pdf-export>
</div>

Position the container off-screen using CSS (for example, with position: absolute and left: -9999px).
css
```
.off-screen-wrapper {
    position: absolute;
    left: -9999px;
    top: 0;
}
```

Add a ViewChild reference to access the PDF Export component.

typescript

import { ViewChild } from '@angular/core';

export class AppComponent {
    @ViewChild('pdfOffscreen') public pdfOffscreen!: PDFExportComponent;
}

Call the saveAs() method to export the PDF. The PDF Export captures all rendered HTML within the kendo-pdf-export tag, including both visible and hidden content.
typescript
```
public exportWithOffscreenContent(): void {
    this.pdfOffscreen.saveAs('document.pdf');
}
```

Hidden Content

Dynamic Content Rendering

Off-Screen Positioning

Suggested Links