@progress/kendo-editor-react-wrapper/docs/pdf-export.md

Kendo UI Editor wrapper for React

---
title: PDF Export
page_title: PDF Export - Editor - Kendo UI Wrappers for React
description: "Export the content of the Kendo UI Editor wrapper for React to PDF."
slug: pdf_export_editor
position: 1
---

# PDF Export

The Editor wrapper component provides options for exporting its content to PDF.

For example, you can specify the file name and whether to export all pages, margins, paper size, font, and other elements.

To use the built-in PDF export functionalities:

1. Include the corresponding command to the tool collection in the toolbar of the Editor.
1. Configure the export settings through the `pdf` attribute.

For the complete list of all PDF configuration properties, refer to the [API of the Kendo UI Editor widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/editor#configuration-pdf).

{% meta height:260 %}
```jsx-preview
class EditorContainer extends React.Component {
    constructor(props) {
            super(props);
			this.value = props.value;
    }

    render() {
        return (
            <div>
                <Editor value={this.value} tools={["pdf"]} pdf={{
                            fileName: "NewDocument.pdf",
                            paperSize: "a4",
                            margin: {
                                bottom: 20,
                                left: 20,
                                right: 20,
                                top: 20
                            }
                        }}/>
            </div>
        );
     }
    }

	var content = "<p><strong>The Kendo UI Editor wrapper for React</strong> allows your users to edit HTML in a familiar, user-friendly way. In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The widget outputs identical HTML across all major browsers, follows accessibility standards and provides API for content manipulation.</p>"

ReactDOM.render(
    <EditorContainer value={content}/>,
    document.querySelector('my-app')
);
```
{% endmeta %}

## Suggested Links

* [Kendo UI Editor for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/editor/overview)
* [API Reference of the Editor Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/editor)