Print in React Document Editor component

22 Jul 202624 minutes to read

To print the document, use the print method from the Document Editor instance.

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

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);
function App() {
    let documenteditor;
    React.useEffect(() => {
        componentDidMount();
    }, []);
    function onPrint() {
        //Print the document content.
        documenteditor.print();
    }
    function componentDidMount() {
        let sfdt = `{
            "sections": [
                {
                    "blocks": [
                        {
                            "inlines": [
                                {
                                    "characterFormat": {
                                        "bold": true,
                                        "italic": true
                                    },
                                    "text": "Hello World"
                                }
                            ]
                        }
                    ],
                    "headersFooters": {
                    }
                }
            ]
        }`;
        setTimeout(() => {
            //Open the document in Document Editor.
            documenteditor.open(sfdt);
        });
    }
    return (<div>
                <button onClick={onPrint}>Print</button>
                <DocumentEditorComponent id="container" ref={scope => {
            documenteditor = scope;
        }} enablePrint={true} height={'330px'}/>
            </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
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);
function App(){
    let documenteditor: DocumentEditorComponent;
     React.useEffect(() => {
    componentDidMount()
    }, []);
    function onPrint() {
        //Print the document content.
        documenteditor.print();
    }
   function componentDidMount() {
        let sfdt: string = `{
            "sections": [
                {
                    "blocks": [
                        {
                            "inlines": [
                                {
                                    "characterFormat": {
                                        "bold": true,
                                        "italic": true
                                    },
                                    "text": "Hello World"
                                }
                            ]
                        }
                    ],
                    "headersFooters": {
                    }
                }
            ]
        }`;
        setTimeout(() => {
            //Open the document in Document Editor.
            documenteditor.open(sfdt);
        });
    }


        return (
            <div>
                <button onClick={onPrint}>Print</button>
                <DocumentEditorComponent
                    id="container"
                    ref={scope => {
                        documenteditor = scope;
                    }}
                    enablePrint={true}
                    height={'330px'}
                />
            </div>
        );
}
export default App
ReactDOM.render(<App />, 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="https://cdn.syncfusion.com/ej2/33.1.44/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

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

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

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

DocumentEditorComponent.Inject(Print, Editor, Selection, SfdtExport, EditorHistory);
let documenteditor: DocumentEditorComponent;
function App() {
  return (
    <div>
      <button onClick={onPrint}>Print</button>
      <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}
      />
    </div>
  );
  function onPrint() {
    //Print the document content.
    documenteditor.print();
  }
}
export default App
ReactDOM.render(<App />, 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="https://cdn.syncfusion.com/ej2/33.1.44/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

NOTE

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

Improve print quality

The Document Editor provides an option to improve the print quality using printDevicePixelRatio in Document Editor settings. The Document Editor uses a canvas approach to render content. The canvas is then converted to an image and processed for print. Using the printDevicePixelRatio API, you can increase the image quality based on your requirement.

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

import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
  let settings = { printDevicePixelRatio: 2 };
  return (
    <DocumentEditorContainerComponent
      id="container"
      height={'590px'}
      serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"
      enableToolbar={true}
      documentEditorSettings={settings}
    />
  );
}
export default App;
createRoot(document.getElementById('sample')).render(<App />);

NOTE

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

NOTE

By default, the printDevicePixelRatio value is 1.

You can print the document in the 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 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);
function App() {
    let documenteditor: DocumentEditorComponent;
    React.useEffect(() => {
        componentDidMount();
    }, []);
    function componentDidMount() {
        //Print the document content.
        documenteditor.print(window);
    }
    return (
        <DocumentEditorComponent
            id="container"
            height={'330px'}
            ref={scope => {
                documenteditor = scope;
            }}
            enablePrint={true}
        />
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorComponent,
  SfdtExport,
  Selection,
  Editor,
  Print,
} from '@syncfusion/ej2-react-documenteditor';

//Inject required modules.
DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, Print);
function App() {
  let documenteditor;
  React.useEffect(() => {
    componentDidMount();
  }, []);
  function componentDidMount() {
    //Print the document content.
    documenteditor.print(window);
  }

  return (
    <div>
      <DocumentEditorComponent
        id="container"
        height={'330px'}
        ref={(scope) => {
          documenteditor = scope;
        }}
        isReadOnly={false}
        enableSelection={true}
        enableEditor={true}
        enablePrint={true}
      />
    </div>
  );
}
export default App;
ReactDOM.render(<App />, 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 the page setup dialog.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorComponent,
  SfdtExport,
  Selection,
  Editor,
  PageSetupDialog,
} from '@syncfusion/ej2-react-documenteditor';
//Inject required modules.
DocumentEditorComponent.Inject(Selection, Editor, PageSetupDialog);
function App() {
  let documenteditor;
  React.useEffect(() => {
    componentDidMount();
  }, []);
  function componentDidMount() {
    //Open page setup dialog.
    documenteditor.showPageSetupDialog();
  }
  return (
    <div>
      <DocumentEditorComponent
        id="container"
        ref={(scope) => {
          documenteditor = scope;
        }}
        isReadOnly={false}
        enableSelection={true}
        enableEditor={true}
        enableEditorHistory={true}
        enablePageSetupDialog={true}
      />
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

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

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

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

} export default App
ReactDOM.render(<App />, 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="https://cdn.syncfusion.com/ej2/33.1.44/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

Online Demo

Explore how to print Word documents using the React Document Editor in this live demo here.

See Also