React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Print in React DocumentEditor component

02 Aug 2021 / 4 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.tsx
index.html
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, Print } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(Print);
export class Default extends React.Component {
    onPrint() {
        this.documenteditor.print();
    }
    componentDidMount() {
        let sfdt = `{
        "sections": [
        {
            "blocks": [
                {
                    "inlines": [
                        {
                            "characterFormat": {
                                "bold": true,
                                "italic": true
                            },
                            "text": "Hello World"
                        }
                    ]
                }
            ],
            "headersFooters": {
            }
        }
    ]
    }`;
        setTimeout(() => {
            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}/>
      </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorComponent,
  DocumentEditor,
  Print
} from '@syncfusion/ej2-react-documenteditor';

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

  onPrint(): void {
    this.documenteditor.print();
  }
  public componentDidMount(): void {
    let sfdt: string = `{
        "sections": [
        {
            "blocks": [
                {
                    "inlines": [
                        {
                            "characterFormat": {
                                "bold": true,
                                "italic": true
                            },
                            "text": "Hello World"
                        }
                    ]
                }
            ],
            "headersFooters": {
            }
        }
    ]
    }`;
    setTimeout(()=>{
        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}
        />
      </div>
    );
  }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
<!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/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>

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

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
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() {
        this.documenteditor.print();
    }
    render() {
        return (<div>
        <button onClick={this.onPrint.bind(this)}>Print</button>
        <DocumentEditorComponent id="container" ref={scope => {
            this.documenteditor = scope;
        }} enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}/>
      </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
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 {
    this.documenteditor.print();
  }

  render() {
    return (
      <div>
        <button onClick={this.onPrint.bind(this)}>Print</button>
        <DocumentEditorComponent
          id="container"
          ref={scope => {
            this.documenteditor = scope;
          }}
          enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}
        />
      </div>
    );
  }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
<!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/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>

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.

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.

Copied to clipboard
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 {
    this.documenteditor.print(window);
  }

  render() {
    return (
      <DocumentEditorComponent
        id="container"
        ref={scope => {
          this.documenteditor = scope;
        }}
        enablePrint={true}
      />
    );
  }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
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() {
        this.documenteditor.print(window);
    }
    render() {
        return (<DocumentEditorComponent id="container" 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

Copied to clipboard
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';

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

  public componentDidMount(): void {
this.documenteditor.showPageSetupDialog();
  }

  render() {
return (
  <DocumentEditorComponent
    id="container"
    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'));
Copied to clipboard
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';
DocumentEditor.Inject(Print, Editor, Selection, EditorHistory, SfdtExport, PageSetupDialog);
export class Default extends React.Component {
    componentDidMount() {
        this.documenteditor.showPageSetupDialog();
    }
    render() {
        return (<DocumentEditorComponent id="container" 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.tsx
index.html
Copied to clipboard
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, EditorHistory, SfdtExport);
export class Default extends React.Component {
    onPrint() {
        let sfdtData = this.documenteditor1.serialize();
        this.documenteditor2.open(sfdtData);
        //Set A5 paper size
        this.documenteditor2.selection.sectionFormat.pageWidth = 419.55;
        this.documenteditor2.selection.sectionFormat.pageHeight = 595.3;
        this.documenteditor2.print();
    }
    render() {
        return (<div>
    <button onClick={this.onPrint.bind(this)}>Print</button>
    <DocumentEditorComponent id="DocumentEditor" ref={scope => {
            this.documenteditor1 = scope;
        }} enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}/>
    <DocumentEditorComponent id="DocumentEditor2" ref={scope => {
            this.documenteditor2 = scope;
        }} enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}/>
  </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
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, EditorHistory, SfdtExport);
export class Default extends React.Component<{}, {}> {
  public documenteditor1: DocumentEditorComponent;
  public documenteditor2: DocumentEditorComponent;

  onPrint() {
let sfdtData = this.documenteditor1.serialize();
this.documenteditor2.open(sfdtData);
//Set A5 paper size
this.documenteditor2.selection.sectionFormat.pageWidth = 419.55;
this.documenteditor2.selection.sectionFormat.pageHeight = 595.3;
this.documenteditor2.print();
  }
  render() {
return (
  <div>
    <button onClick={this.onPrint.bind(this)}>Print</button>
    <DocumentEditorComponent
      id="DocumentEditor"
      ref={scope => {
        this.documenteditor1 = scope;
      }}
      enablePrint={true}
      isReadOnly={false}
      enableSelection={true}
      enableSfdtExport={true}
      enableEditor={true}
      enableEditorHistory={true}
    />
    <DocumentEditorComponent
      id="DocumentEditor2"
      ref={scope => {
        this.documenteditor2 = scope;
      }}
      enablePrint={true}
      isReadOnly={false}
      enableSelection={true}
      enableSfdtExport={true}
      enableEditor={true}
      enableEditorHistory={true}
    />
  </div>
);
  }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
<!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/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>

See Also

Previous
Next