The Download Component & How They Give PDFs an Offer They Can't Refuse
"Gah! I closed it out again! Why can't they FIX that?"
It's happened to all of us. We go online, find a resource, and of course it's a downloadable PDF link. You click it, and it opens in your browser. It isn't the right form, so you close the form and.....
.....you're back at your Desktop. D'oh!
Target vs New Tab
In AEM, we should all be familiar with links and their purpose, but some users may forget to change how their links behave.
By default, PDF's will open within the user's browser from the same tab they are navigating on. When a user is finished with their form, they are extremely likely to close out the form, not realizing they are also closing out of their current tab. This is the main reason why PDFs that are being downloaded or linked to should always be set to open in a new tab when authoring. The same holds true for linking to other assets for consistency, and external web pages as well.
Based on their file types, generally images and office documents will physically download regardless of the tab setting chosen, while PDFs will actively open within the user's web browser, either in the same tab or a new tab as designated by the link's settings.
Forcing PDFs to Download
What happens though, when a user wants the file saved on their computer without having to open it in the browser, manually save it, and then potentially close out their web browser by mistake? What about if an agency needs to have a pdf downloaded for governmental or legal purposes?
Currently, the Download component is the only way a component forces a PDF to download directly to the user's device when clicked on. This is emphasized because the component itself simply takes the URL of the asset and appends ".coredownload.xxx" where "xxx" is the filetype being downloaded. However, the component doesn't look very good out of the box and needs some TLC.
With this information, we can also append this to any link, specifically for PDFs, to force them to download from Text, Text CTA, and other, linkable components. For example:
This Download Component Appends ".coredownload.pdf" automatically to the link
Notice how scrunched this text may become. And look at this information to the right. Most times we don't want that displayed. By default, these columns can't even be hidden, but we can easily do this with CSS.
- Filename
- pdf-downloaded.pdf
- Size
- 67 KB
- Format
- application/pdf
Bonus: The Inline Extension
The Download component has an option called "Display Inline" which when checked will actually append ".coredownload.inline.xxx" to the link. This is for presenting within the browser without actually saving the file, though most Office documents can only download.
Authors create links to PDF documents routinely and the default behavior in AEM is these open within the browser, so this made the Download component somewhat redundant and impractical in most scenarios; leaving the inline feature unneeded.
However, it can serve a niche purpose for images AND videos. By appending the inline extension to an image or video link, it will render the image or video within the browser, just like a PDF, without it saving to the user's device. Unfortunately, we do not want to forego this route, as these will not be accessible, such as captions being unavailable to the video playing and images potentially not having alt-text.
The below image is 272kb. The full-size rendition is 1.5MB, which displays in the browser instead of downloading by default. Other images may grossly-exceed these values, so watching file sizes is always important!