How to Save a PDF that's Embedded in a Website
TL;DR
This tutorial demonstrates how to download PDFs embedded in websites using Google Chrome by utilizing the 'Inspect Element' tool to find and reconstruct the PDF's source URL.
Key insights
Direct PDF downloads are often not available for embedded PDFs on websites.
- Websites may embed PDFs using iFrames, which do not offer a direct download option.
- Right-clicking on an embedded PDF usually does not reveal a 'save' or 'download' option.
- Some viewers might display a scroll bar but lack download functionality.
Google Chrome's 'Inspect Element' tool is key to accessing embedded PDF source code.
- The 'Inspect' feature allows users to view the underlying HTML and code of a webpage.
- By inspecting the iFrame containing the PDF, users can find the source URL.
- This method requires a workaround to correctly form the downloadable URL.
A workaround is needed to construct the correct URL for downloading embedded PDFs.
- The source URL found in the code might be relative and require modification.
- Removing a leading slash from the source URL is often necessary for it to be a valid absolute URL.
- Once the correct URL is formed, it can be pasted into the browser's address bar for download.
Alternative method using 'Properties' in Chrome's inspect tool.
- Within the inspect tool, navigating to the 'Properties' section of the iFrame can reveal the source (SRC) attribute.
- This SRC attribute directly contains the full web address of the PDF.
- Copying and pasting this full address into the browser allows for downloading the PDF.
Key moments
- 00:00Introduction to the problem: difficulty downloading PDFs embedded directly into websites, using building codes as an example.
- 00:51Demonstration of the lack of direct download options for embedded PDFs, showing right-click and viewer limitations.
- 01:25Introduction to the solution using Google Chrome's 'Inspect' feature to access the embedded PDF's source code.
- 02:04Explanation of how to locate the PDF source within the inspected code and the initial challenge of copying an incomplete URL.
- 02:44The workaround: correcting the copied URL by removing a leading slash and pasting it into the browser for download.
- 03:24Alternative method: finding the full PDF source URL directly within the 'Properties' of the iFrame in the inspect tool.