Print in React DocumentEditor component

24 May 2022 / 5 minutes to read

To print the document, use the print method from document editor instance.

Refer to the following example for showing a document and print it.

Source

Preview

index.jsx

index.html

index.tsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, Print } from '@syncfusion/ej2-react-documenteditor';
//Inject require modules.
DocumentEditorComponent.Inject(Print);
export class Default extends React.Component {
    onPrint() {
        //Print the document content.
        this.documenteditor.print();
    }
    componentDidMount() {
        let sfdt = `{
            "sections": [
                {
                    "blocks": [
                        {
                            "inlines": [
                                {
                                    "characterFormat": {
                                        "bold": true,
                                        "italic": true
                                    },
                                    "text": "Hello World"
                                }
                            ]
                        }
                    ],
                    "headersFooters": {
                    }
                }
            ]
        }`;
        setTimeout(() => {
            //Open the document in Document Editor.
            this.documenteditor.open(sfdt);
        });
    }
    render() {
        return (<div>
                <button onClick={this.onPrint.bind(this)}>Print</button>
                <DocumentEditorComponent id="container" ref={scope => {
            this.documenteditor = scope;
        }} enablePrint={true} height={'330px'}/>
            </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, Print } from '@syncfusion/ej2-react-documenteditor';

//Inject require modules.
DocumentEditorComponent.Inject(Print);
export class Default extends React.Component<{}, {}> {
    public documenteditor: DocumentEditorComponent;

    onPrint(): void {
        //Print the document content.
        this.documenteditor.print();
    }
    public componentDidMount(): void {
        let sfdt: string = `{
            "sections": [
                {
                    "blocks": [
                        {
                            "inlines": [
                                {
                                    "characterFormat": {
                                        "bold": true,
                                        "italic": true
                                    },
                                    "text": "Hello World"
                                }
                            ]
                        }
                    ],
                    "headersFooters": {
                    }
                }
            ]
        }`;
        setTimeout(() => {
            //Open the document in Document Editor.
            this.documenteditor.open(sfdt);
        });
    }

    render() {
        return (
            <div>
                <button onClick={this.onPrint.bind(this)}>Print</button>
                <DocumentEditorComponent
                    id="container"
                    ref={scope => {
                        this.documenteditor = scope;
                    }}
                    enablePrint={true}
                    height={'330px'}
                />
            </div>
        );
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));

Refer to the following example for creating a document and print it.

Source

Preview

index.jsx

index.html

index.tsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, DocumentEditor, Print, Editor, Selection, EditorHistory, SfdtExport } from '@syncfusion/ej2-react-documenteditor';
DocumentEditor.Inject(Print, Editor, Selection, SfdtExport, EditorHistory);
export class Default extends React.Component {
    onPrint() {
        //Print the document content.
        this.documenteditor.print();
    }
    render() {
        return (<div>
                <button onClick={this.onPrint.bind(this)}>Print</button>
                <DocumentEditorComponent id="container" height={'330px'} ref={scope => {
            this.documenteditor = scope;
        }} enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}/>
            </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorComponent,
    DocumentEditor,
    Print,
    Editor, Selection, EditorHistory, SfdtExport
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditor.Inject(Print, Editor, Selection, SfdtExport, EditorHistory);
export class Default extends React.Component<{}, {}> {
    public documenteditor: DocumentEditorComponent;

    onPrint(): void {
        //Print the document content.
        this.documenteditor.print();
    }

    render() {
        return (
            <div>
                <button onClick={this.onPrint.bind(this)}>Print</button>
                <DocumentEditorComponent
                    id="container"
                    height={'330px'}
                    ref={scope => {
                        this.documenteditor = scope;
                    }}
                    enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}
                />
            </div>
        );
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));

DocumentEditor features are segregated into individual feature-wise modules. To use print inject Print module using the DocumentEditor.Inject(Print). To enable print for a document editor instance, set enablePrint as true.

Improve print quality

Document editor provides an option to improve the print quality using printDevicePixelRatio in Document editor settings. Document editor using canvas approach to render content. Then, canvas are converted to image and it process for print. Using printDevicePixelRatio API, you can increase the image quality based on your requirement.

The following example code illustrates how to improve the print quality in Document editor container.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorContainerComponent, Toolbar
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
export class App extends React.Component<{}, {}> {
  public settings={printDevicePixelRatio :2};
    render() {
        return (
            <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" enableToolbar={true} documentEditorSettings= {this.settings}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

Note: By default, printDevicePixelRatio value is 1

Print using window object

You can print the document in document editor by passing the window instance. This is useful to implement print in third party frameworks such as electron, where the window instance will not be available. Refer to the following example.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorComponent,
    DocumentEditor,
    Print,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditor.Inject(Print);
export class Default extends React.Component<{}, {}> {
    public documenteditor: DocumentEditorComponent;

    public componentDidMount(): void {
        //Print the document content.
        this.documenteditor.print(window);
    }

    render() {
        return (
            <DocumentEditorComponent
                id="container"
                height={'330px'}
                ref={scope => {
                    this.documenteditor = scope;
                }}
                enablePrint={true}
            />
        );
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, DocumentEditor, Print, } from '@syncfusion/ej2-react-documenteditor';
DocumentEditor.Inject(Print);
export class Default extends React.Component {
    componentDidMount() {
        //Print the document content.
        this.documenteditor.print(window);
    }
    render() {
        return (<DocumentEditorComponent id="container" height={'330px'} ref={scope => {
            this.documenteditor = scope;
        }} enablePrint={true}/>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));

Page setup

Some of the print options cannot be configured using JavaScript. Refer to the following links to learn more about the browser page setup:

However, you can customize margins, paper, and layout options by modifying the section format properties using page setup dialog

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, DocumentEditor, Print, Editor, Selection, EditorHistory, PageSetupDialog, SfdtExport } from '@syncfusion/ej2-react-documenteditor';

//Inject require modules.
DocumentEditor.Inject(Print, Editor, Selection, EditorHistory, SfdtExport, PageSetupDialog);
export class Default extends React.Component<{}, {}> {
public documenteditor: DocumentEditorComponent;

public componentDidMount(): void {
    //Open page setup dialog.
    this.documenteditor.showPageSetupDialog();
}

render() {
    return (
        <DocumentEditorComponent
            id="container"
            height={'330px'}
            ref={scope => {
                this.documenteditor = scope;
            }}
            enablePrint={true}
            isReadOnly={false}
            enableSelection={true}
            enableSfdtExport={true}
            enableEditor={true}
            enableEditorHistory={true}
            enablePageSetupDialog={true}
        />
    );
}
}
ReactDOM.render(<Default />, document.getElementById('sample'));

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, DocumentEditor, Print, Editor, Selection, EditorHistory, PageSetupDialog, SfdtExport } from '@syncfusion/ej2-react-documenteditor';
//Inject require modules.
DocumentEditor.Inject(Print, Editor, Selection, EditorHistory, SfdtExport, PageSetupDialog);
export class Default extends React.Component {
    componentDidMount() {
        //Open page setup dialog.
        this.documenteditor.showPageSetupDialog();
    }
    render() {
        return (<DocumentEditorComponent id="container" height={'330px'} ref={scope => {
            this.documenteditor = scope;
        }} enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true} enablePageSetupDialog={true}/>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));

By customizing margins, papers, and layouts, the layout of the document will be changed in document editor. To modify these options during print operation, serialize the document as SFDT using the serialize method in document editor instance and open the SFDT data in another instance of document editor in separate window.

The following example shows how to customize layout options only for printing.

Source

Preview

index.jsx

index.html

index.tsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, DocumentEditor, Print, Editor, Selection, EditorHistory, SfdtExport, } from '@syncfusion/ej2-react-documenteditor';
//Inject require modules.
DocumentEditor.Inject(Print, Editor, Selection, EditorHistory, SfdtExport);
export class Default extends React.Component {
    onPrint() {
        //Serialize the document content.
        let sfdtData = this.documenteditor1.serialize();
        //Open the serialized content in Document Editor.
        this.documenteditor2.open(sfdtData);
        //Set A5 paper size
        this.documenteditor2.selection.sectionFormat.pageWidth = 419.55;
        this.documenteditor2.selection.sectionFormat.pageHeight = 595.3;
        //Print the document content.
        this.documenteditor2.print();
    }
    render() {
        return (<div>
            <button onClick={this.onPrint.bind(this)}>Print</button>
            <DocumentEditorComponent id="DocumentEditor" height={'330px'} ref={scope => {
            this.documenteditor1 = scope;
        }} enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}/>
            <DocumentEditorComponent id="DocumentEditor2" height={'330px'} ref={scope => {
            this.documenteditor2 = scope;
        }} enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}/>
        </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, DocumentEditor, Print, Editor, Selection, EditorHistory, SfdtExport, } from '@syncfusion/ej2-react-documenteditor';

//Inject require modules.
DocumentEditor.Inject(Print, Editor, Selection, EditorHistory, SfdtExport);
export class Default extends React.Component<{}, {}> {
public documenteditor1: DocumentEditorComponent;
public documenteditor2: DocumentEditorComponent;

onPrint() {
    //Serialize the document content.
    let sfdtData = this.documenteditor1.serialize();
    //Open the serialized content in Document Editor.
    this.documenteditor2.open(sfdtData);
    //Set A5 paper size
    this.documenteditor2.selection.sectionFormat.pageWidth = 419.55;
    this.documenteditor2.selection.sectionFormat.pageHeight = 595.3;
    //Print the document content.
    this.documenteditor2.print();
}
render() {
    return (
        <div>
            <button onClick={this.onPrint.bind(this)}>Print</button>
            <DocumentEditorComponent
                id="DocumentEditor"
                height={'330px'}
                ref={scope => {
                    this.documenteditor1 = scope;
                }}
                enablePrint={true}
                isReadOnly={false}
                enableSelection={true}
                enableSfdtExport={true}
                enableEditor={true}
                enableEditorHistory={true}
            />
            <DocumentEditorComponent
                id="DocumentEditor2"
                height={'330px'}
                ref={scope => {
                    this.documenteditor2 = scope;
                }}
                enablePrint={true}
                isReadOnly={false}
                enableSelection={true}
                enableSfdtExport={true}
                enableEditor={true}
                enableEditorHistory={true}
            />
        </div>
    );
}
}
ReactDOM.render(<Default />, document.getElementById('sample'));

Print in React DocumentEditor component

Improve print quality

Print using window object

Page setup

See Also