Search results

Export

Document editor exports the document into various known file formats in client-side such as Microsoft Word document (.docx), text document (.txt), and its own format called Syncfusion Document Text (.sfdt).

Sfdt export

The following example shows how to export documents in document editor as Syncfusion document text (.sfdt).

Source
Preview
index.jsx
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(SfdtExport, Selection, Editor);
export class Default extends React.Component {
    save() {
        let proxy = this;
        proxy.documenteditor.save('sample', 'Sfdt');
    }
    render() {
        return (<div>
                <button onClick={this.save.bind(this)}>Save</button>
                <DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true}/>
            </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorComponent, DocumentEditor, SfdtExport, Selection, Editor
} from '@syncfusion/ej2-react-documenteditor';


DocumentEditorComponent.Inject(SfdtExport, Selection, Editor);
export class Default extends React.Component<{}, {}> {
    public documenteditor: DocumentEditorComponent;
    save(): void {
        let proxy: any = this;
        proxy.documenteditor.save('sample', 'Sfdt');
    }
    render() {
        return (
            <div>
                <button onClick={this.save.bind(this)}>Save</button>
                <DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={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/ej2-react-documenteditor/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>

Document editor features are segregated into individual feature-wise modules. To use Sfdt export, inject the SfdtExport module using DocumentEditor.Inject( SfdtExport).

To enable Sfdt export for a document editor instance, set enableSfdtExport to true.

Word export

The following example shows how to export the document as Word document (.docx).

Source
Preview
index.jsx
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, WordExport, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, WordExport);
export class Default extends React.Component {
    save() {
        let proxy = this;
        proxy.documenteditor.save('sample', 'Docx');
    }
    render() {
        return (<div>
        <button onClick={this.save.bind(this)}>Save</button>
        <DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enableWordExport={true}/>
        </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorComponent, DocumentEditor,WordExport, SfdtExport, Selection, Editor
} from '@syncfusion/ej2-react-documenteditor';


DocumentEditorComponent.Inject( SfdtExport, Selection, Editor,WordExport);
export class Default extends React.Component<{}, {}> {
public documenteditor:DocumentEditorComponent;
save():void{
   let proxy: any = this;
  proxy.documenteditor.save('sample', 'Docx');
  }
  render() {
    return (
    <div>
        <button onClick={this.save.bind(this)}>Save</button>
        <DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enableWordExport={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/ej2-react-documenteditor/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>

Document editor features are segregated into individual feature-wise modules. To use word export, inject the WordExport and SfdtExport modules using DocumentEditor.Inject(WordExport, SfdtExport).

To enable word export for a document editor instance, set enableWordExport to true.

Text export

The following example shows how to export document as text document (.txt).

Source
Preview
index.jsx
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, SfdtExport, Selection, Editor, TextExport } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, TextExport);
export class Default extends React.Component {
    save() {
        let proxy = this;
        proxy.documenteditor.save('sample', 'Txt');
    }
    render() {
        return (<div>
                <button onClick={this.save.bind(this)}>Save</button>
                <DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enableTextExport={true}/>
            </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorComponent, DocumentEditor, SfdtExport, Selection, Editor, TextExport
} from '@syncfusion/ej2-react-documenteditor';


DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, TextExport);
export class Default extends React.Component<{}, {}> {
    public documenteditor: DocumentEditorComponent;
    save(): void {
        let proxy: any = this;
        proxy.documenteditor.save('sample', 'Txt');
    }
    render() {
        return (
            <div>
                <button onClick={this.save.bind(this)}>Save</button>
                <DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enableTextExport={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/ej2-react-documenteditor/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>

Document editor features are segregated into individual feature-wise modules. To use text export, inject the TextExport and SfdtExport modules using the DocumentEditor.Inject(TextExport, SfdtExport).

To enable text export for a document editor instance, set enableTextExport to true.

Export as blob

Document editor also supports API to store the document into a blob. Refer to the following sample to export document into blob in client-side.

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


DocumentEditorComponent.Inject(WordExport, SfdtExport);
export class Default extends React.Component<{}, {}> {
    public documenteditor: DocumentEditorComponent;
    save(): void {
        let proxy: any = this;
        proxy.documenteditor.saveAsBlob('Docx').then((exportedDocument: Blob) => {
      // The blob can be processed further
    });
    }
    render() {
        return (
            <div>
                <button onClick={this.save.bind(this)}>Save</button>
                <DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} enableWordExport={true} enableSfdtExport={true} enableTextExport={true} />
            </div>
        );
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, WordExport, SfdtExport } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(WordExport, SfdtExport);
export class Default extends React.Component {
    save() {
        let proxy = this;
        proxy.documenteditor.saveAsBlob('Docx').then((exportedDocument) => {
            // The blob can be processed further
        });
    }
    render() {
        return (<div>
                <button onClick={this.save.bind(this)}>Save</button>
                <DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} enableWordExport={true} enableSfdtExport={true} enableTextExport={true}/>
            </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));

For instance, to export the document as Rich Text Format file, implement an ASP.NET MVC web API controller using DocIO library by passing the DOCX blob. Refer to the following code example.

//API controller for the conversion.
[HttpPost]
public HttpResponseMessage ExportAsRtf()
{
    System.Web.HttpPostedFile data = HttpContext.Current.Request.Files[0];
    //Opens document stream
    WordDocument wordDocument = new WordDocument(data.InputStream);
    MemoryStream stream = new MemoryStream();
    //Converts document stream as RTF
    wordDocument.Save(stream, FormatType.Rtf);
    wordDocument.Close();
    stream.Position = 0;
    return new HttpResponseMessage() { Content = new StreamContent(stream) };
}

In client-side, you can consume this web service and save the document as Rich Text Format (.rtf) file. Refer to the following example.

 onExport(): void {
    this.documenteditor.saveAsBlob('Docx').then((exportedDocument: Blob) => {
      // The blob can be processed further
      let formData: FormData = new FormData();
      formData.append('fileName', 'sample.docx');
      formData.append('data', exportedDocument);
      this.saveAsRtf(formData);
    });
  }

  saveAsRtf(formData: FormData): void {
    let httpRequest: XMLHttpRequest = new XMLHttpRequest();
    httpRequest.open('POST', '/api/DocumentEditor/ExportAsRtf', true);
    httpRequest.onreadystatechange = () => {
      if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200 || httpRequest.status === 304) {
          if (!!navigator.msSaveBlob) {
            navigator.msSaveBlob(httpRequest.response, 'sample.rtf');
          } else {
            let downloadLink: HTMLAnchorElement = document.createElementNS(
              'http://www.w3.org/1999/xhtml',
              'a'
            ) as HTMLAnchorElement;
            download(
              'sample.rtf',
              'rtf',
              httpRequest.response,
              downloadLink,
              'download' in downloadLink
            );
          }
        } else {
          console.error(httpRequest.response);
        }
      }
    };
    httpRequest.responseType = 'blob';
    httpRequest.send(formData);
  }

  download(fileName: string,extension: string,buffer: Blob,downloadLink: HTMLAnchorElement,hasDownloadAttribute: Boolean): void {
    if (hasDownloadAttribute) {
      downloadLink.download = fileName;
      let dataUrl: string = window.URL.createObjectURL(buffer);
      downloadLink.href = dataUrl;
      let event: MouseEvent = document.createEvent('MouseEvent');
      event.initEvent('click', true, true);
      downloadLink.dispatchEvent(event);
      setTimeout((): void => {
          window.URL.revokeObjectURL(dataUrl);
          dataUrl = undefined;
        }
      );
    } else {
      if (extension !== 'docx' && extension !== 'xlsx') {
        let url: string = window.URL.createObjectURL(buffer);
        let isPopupBlocked: Window = window.open(url, '_blank');
        if (!isPopupBlocked) {
          window.location.href = url;
        }
      }
    }
  }
onExport();
void {
    this: .documenteditor.saveAsBlob('Docx').then((exportedDocument) => {
        // The blob can be processed further
        let formData = new FormData();
        formData.append('fileName', 'sample.docx');
        formData.append('data', exportedDocument);
        this.saveAsRtf(formData);
    })
};
saveAsRtf(formData, FormData);
void {
    let: httpRequest, XMLHttpRequest = new XMLHttpRequest(),
    httpRequest: .open('POST', '/api/DocumentEditor/ExportAsRtf', true),
    httpRequest: .onreadystatechange = () => {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200 || httpRequest.status === 304) {
                if (!!navigator.msSaveBlob) {
                    navigator.msSaveBlob(httpRequest.response, 'sample.rtf');
                }
                else {
                    let downloadLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                    download('sample.rtf', 'rtf', httpRequest.response, downloadLink, 'download' in downloadLink);
                }
            }
            else {
                console.error(httpRequest.response);
            }
        }
    },
    httpRequest: .responseType = 'blob',
    httpRequest: .send(formData)
};
download(fileName, string, extension, string, buffer, Blob, downloadLink, HTMLAnchorElement, hasDownloadAttribute, Boolean);
void {
    if(hasDownloadAttribute) {
        downloadLink.download = fileName;
        let dataUrl = window.URL.createObjectURL(buffer);
        downloadLink.href = dataUrl;
        let event = document.createEvent('MouseEvent');
        event.initEvent('click', true, true);
        downloadLink.dispatchEvent(event);
        setTimeout(() => {
            window.URL.revokeObjectURL(dataUrl);
            dataUrl = undefined;
        });
    }, else: {
        if(extension) { }
    } !== 'docx' && extension !== 'xlsx'
};
{
    let url = window.URL.createObjectURL(buffer);
    let isPopupBlocked = window.open(url, '_blank');
    if (!isPopupBlocked) {
        window.location.href = url;
    }
}

See Also