Configure Image Downloader (LWC)

Published on October 19, 2026 Lightning PDF Generator

Configure Image Downloader (LWC)

The Image Downloader (LWC) component adds a button to any Lightning record page that lets users download the page, or selected parts of it, as a PNG image. This guide shows how to place the component and configure each What to Download option.

Quick Overview: Add the component in Lightning App Builder, choose what to download (Window, Full Page, Component or CSS Selector), then set the button label and file name.

Step 1: Add the Component to the Record Page

Open Lightning App Builder for the object record page.
Find Image Downloader (LWC) in the component list.
Drag and drop the component where you want the button to appear.

Recommendation: Place the component near the last components on the page so the full page finishes loading before a user downloads the image.

Adding Image Downloader (LWC) in Lightning App Builder.

Step 2: Choose What to Download

Every option requires a button label and a file name. The table summarizes each option; detailed examples follow.

Option	Result	Extra Setting
Window	Visible window area	None
Full Page	Record page without navigation bar and header	None
Component	Selected components only	Component indexes
CSS Selector	Elements matching the selectors	CSS selectors (comma separated)

Option 1: Window

Select Window in the What to Download picklist, then define the button label and file name.

Configuring the Window option.

Sample image downloaded with the Window option:

Sample image downloaded with the Window option.

Option 2: Full Page

Select Full Page, then define the button label and file name.

Configuring the Full Page option.

Result: The image shows only the record page, without the navigation bar and header.

Sample full page download.

Option 3: Component

Select Component, give the button label and file name, then define the component indexes of the components to include in the image.

How indexes work: The index starts at 0. Count only the visible parent components in the Flexi area, from top to left to right.

Configuring the Component option with component indexes.

Sample image downloaded with component indexes 1 and 3:

Sample image with component indexes 1 and 3.

Option 4: CSS Selector

Select CSS Selector, define the button label and file name, then enter the CSS selector. Separate multiple selectors with commas.

Configuring the CSS Selector option.

Sample image download using the selectors .highlights and .detail-panel-root:

Sample image downloaded with the CSS Selector option.

Knowledge Article Number: KA-00474