Embedded Images

To export images successfully, make sure that their extensions are correct.

For example, a .png image with a .jpg extension, which is displayed on a page, might not show up in the exported PDF file or might cause exceptions in the PDF reader. For more information on loading images from different domains, refer to the article on known limitations.

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.

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