Image Resolution

By default, images get embedded at their original resolution.

If the content includes large images, this behavior might cause performance problems and out-of-memory errors. To limit the resolution of the images in the output file, set the desired value to imageResolution in the dots per inch (DPI) unit.

For more information on embedding images, refer to:

import React from 'react';
import ReactDOM from 'react-dom';
import { savePDF } from '@progress/kendo-react-pdf';

class App extends React.Component {
    image;

    render() {
        return (
            <div>
                <div className="example-config">
                    <button className="k-button" onClick={() => { savePDF(this.image); }}>
                        Export PDF with default resolution
                    </button>
                    &nbsp;
                    <button className="k-button" onClick={() => { savePDF(this.image, { imageResolution: 36 }); }}>
                        Export PDF with 36 dpi
                    </button>
                </div>

                <img
                    ref={(image) => this.image = image}
                    src="https://c2.staticflickr.com/2/1574/25734996011_637430f5d8_c.jpg"
                    width="750px"
                />
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article

 /