Get Base64 value from a loaded PDF

16 Oct 202511 minutes to read

Overview

This guide shows how to get the base64-encoded value of a PDF loaded in the Syncfusion PDF Viewer using React. This is useful for sending the PDF as a base64 string or processing it on the client.

How to Retrieve Base64 Value

Step 1: Follow the steps in the Get started with React PDF Viewer guide to create a sample.

Step 2: Set Up Your React Component

Create a React component and set up the Syncfusion® PDF Viewer. Add a button to trigger the conversion to a base64 string.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import {
    PdfViewerComponent,
    Toolbar,
    Magnification,
    Navigation,
    Annotation,
    TextSelection,
    TextSearch,
    FormFields,
    FormDesigner,
    PageOrganizer,
    Inject
} from '@syncfusion/ej2-react-pdfviewer';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.viewerRef = React.createRef();
    }

    // Function to get Base64 of the loaded document
    base64ofloadedDocument = () => {
        this.viewerRef.current.saveAsBlob().then((blobData) => {
            const reader = new FileReader();
            reader.onload = () => {
                const base64data = reader.result;
                console.log(base64data);
            };
            reader.readAsDataURL(blobData);
        });
    };

    render() {
        return (
            <div>
                <div className='control-section' style={{ marginTop: '50px' }}>
                <button onClick={this.base64ofloadedDocument} style={{ marginTop: '20px' }}>
                    Get Base64
                </button>
                    <PdfViewerComponent
                        ref={this.viewerRef}
                        id="PdfViewer"
                        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                        resourceUrl= "https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2-pdfviewer-lib"
                        style={{ height: '640px' }}
                    >
                        <Inject services={[
                            Toolbar,
                            Magnification,
                            Navigation,
                            Annotation,
                            TextSelection,
                            TextSearch,
                            FormFields,
                            FormDesigner,
                            PageOrganizer
                        ]} />
                    </PdfViewerComponent>
                </div>
            </div>
        );
    }
}

const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import {
    PdfViewerComponent,
    Toolbar,
    Magnification,
    Navigation,
    Annotation,
    TextSelection,
    TextSearch,
    FormFields,
    FormDesigner,
    PageOrganizer,
    Inject
} from '@syncfusion/ej2-react-pdfviewer';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.viewerRef = React.createRef();
    }

    // Function to get Base64 of the loaded document
    base64ofloadedDocument = () => {
        this.viewerRef.current.saveAsBlob().then((blobData) => {
            const reader = new FileReader();
            reader.onload = () => {
                const base64data = reader.result;
                console.log(base64data);
            };
            reader.readAsDataURL(blobData);
        });
    };

    render() {
        return (
            <div>
                <div className='control-section' style={{ marginTop: '50px' }}>
                <button onClick={this.base64ofloadedDocument} style={{ marginTop: '20px' }}>
                    Get Base64
                </button>
                    <PdfViewerComponent
                        ref={this.viewerRef}
                        id="PdfViewer"
                        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                        serviceUrl= "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
                        style={{ height: '640px' }}
                    >
                        <Inject services={[
                            Toolbar,
                            Magnification,
                            Navigation,
                            Annotation,
                            TextSelection,
                            TextSearch,
                            FormFields,
                            FormDesigner,
                            PageOrganizer
                        ]} />
                    </PdfViewerComponent>
                </div>
            </div>
        );
    }
}

const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Conclusion

By following these steps, a loaded PDF can be converted to a Base64 string on button click for transfer or processing.

View sample in GitHub