Hidden Content

You can generate content in PDF which is otherwise not visible to the user during the PDF export itself.

To export company logos, contact details, or other types of information to PDF that is not visible to the user, utilize the PDFExport component or the savePDF method.

To prevent such extra content from displaying during the PDF export:

  1. Create a container that holds all the information you want to hide from the user.
  2. Make sure that the container is fully rendered.

The following example demonstrates how to use absolute positioning to move the container off the screen.

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFExport } from '@progress/kendo-react-pdf';

class App extends React.Component {
    pdfExportComponent;

    render() {
        return (
            <div>
                <div className="example-config">
                    <button className="k-button" onClick={() => { this.pdfExportComponent.save(); }}>
                        Export PDF
                    </button>
                </div>

                <div style={{ position: "absolute", left: "-1000px", top: 0 }}>
                    <PDFExport
                        paperSize="A4"
                        margin="1cm"
                        ref={(component) => this.pdfExportComponent = component}
                    >
                        <div style={{ width: "500px" }}>
                            <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>
                        </div>
                    </PDFExport>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article