> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/pdf-viewer.md).
# PDF Viewer
The Avonni PDF Viewer component embeds and displays PDF documents directly within your Lightning Pages — no downloads, no separate applications required.
## Overview
Use the PDF Viewer to surface contextual documents — invoices, contracts, reports, or guides — right where users need them. PDFs can be loaded from Salesforce Files (ContentDocumentId), external URLs, or Base64-encoded content.
{% hint style="warning" %}
**Salesforce setting required for inline PDF viewing**
In Salesforce Setup, go to "**File Upload and Download Security**." Find the entry for PDF and set its behavior to "Execute in Browser." This enables the PDF to render inside the component. If it's set to "Download," Salesforce will force the file to download, and the viewer will appear blank or trigger a download rather than display the document.
How to check and update:
1. Setup → Quick Find: "File Upload and Download Security"
2. Open the list, locate "PDF"
3. Change Behavior to "Execute in Browser"
4. Save
5. Refresh your Lightning page and test the viewer
{% endhint %}
### Use Cases
* Displaying generated invoice or quote PDFs on Opportunity or Order records.
* Showing signed contracts or agreements on Account or Contact pages.
* Embedding product manuals or datasheets on Product record pages.
* Presenting reports generated as PDFs within a dashboard component.
* Viewing uploaded attachments directly within a custom component context.
## Configuration
To configure the PDF Viewer, select it on the canvas. The configuration panel opens on the right. The sections below mirror the Properties tab from top to bottom.
### Properties
#### Source
The **Source** setting defines which PDF to display. Enter one of the following:
* **ContentDocumentId** — the 15- or 18-character Salesforce ID of a File (ContentDocument) stored in your org. This is the most common and recommended method for internal documents. Bind this to a variable that holds the ID.
* **URL** — a direct, publicly accessible HTTPS URL pointing to a PDF file. Ensure the URL is reachable by your users and that no CORS policy blocks embedding.
* **Base64** — a Base64-encoded string representing the full PDF content. Use only for small, dynamically generated PDFs; large Base64 strings can impact performance and hit configuration size limits.
#### Title
An optional **Title** for the document, displayed as part of the viewer frame. You can bind this to a record field or variable.
### Placeholder
The **Placeholder** group controls what appears when no source is loaded. Enable **Show Placeholder** to activate these options:
* **Placeholder Message** — the text displayed below the illustration when the source is empty. Requires: **Show Placeholder** enabled.
* **Placeholder Illustration** — the illustration shown when the source is empty. Defaults to **No Preview**. Available options include Going Camping, Maintenance, Desert, Open Road, No Access, No Connection, Page Not Available, and others. Requires: **Show Placeholder** enabled.
### Set Component Visibility
All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).
## Examples
### Displaying a Salesforce File (using ContentDocumentId)
**Scenario:** Display the latest invoice PDF related to the current Opportunity record page.
**Approach:** Use an autolaunched Flow triggered "On Load" to retrieve the ContentDocumentId and pass it to the PDF Viewer.
**Setup Overview**
{% stepper %}
{% step %}
#### **Create an Autolaunched Flow**
Since the PDF Viewer component requires a `ContentDocumentId` to display a Salesforce file, but you typically only have access to the record ID (e.g., Opportunity ID), you need a way to find the correct file. An Autolaunched Flow allows you to:
* Query the Salesforce database to find files related to the current record
* Apply filters to locate the specific PDF you want to display (e.g., the latest invoice)
* Return the `ContentDocumentId` to the component
**Configuration**
* Accepts the record ID as input
* Queries related files through `ContentDocumentLink` and `ContentVersion` objects
* Filters for PDF files with "Invoice" in the title
* Returns the `ContentDocumentId` of the most recent matching file
{% endstep %}
{% step %}
#### In your Dynamic Component
Now that your Flow is ready to retrieve the ContentDocumentId, you need to configure your Dynamic Component to execute this Flow and pass the result to the PDF Viewer. This involves setting the target object, creating a variable to store the file ID, triggering the Flow when the page loads, and binding that variable to the PDF Viewer's Source property.
**Steps:**
* Set the **Target Object Name** to `Opportunity` in your Dynamic Component settings (this enables access to the current record context)
* Create a **Text Variable** (e.g., `invoiceFileId`) to store the ContentDocumentId
* Add an **Execute Flow** action to the **On Load** interaction:
* Select your autolaunched Flow
* Map the Flow's **input variable** to `@recordId` (this passes the current Opportunity ID to the Flow)
* Map the Flow's **output variable** to `{!invoiceFileId}` (this stores the returned ContentDocumentId)
* Configure the PDF Viewer's **Source** property to `{!invoiceFileId}`
{% endstep %}
{% endstepper %}
**Result:** When the page loads, the Flow retrieves the latest invoice PDF's ContentDocumentId and the PDF Viewer displays it automatically.
### Displaying a PDF from an External URL
**Scenario:** Embed a publicly available product datasheet PDF.
1. **Add PDF Viewer:** Add the component to your canvas.
2. **Configure Source:**
* Select the PDF Viewer.
* In the **Source** property, directly enter the full HTTPS URL of the PDF file (e.g., `https://www.example-company.com/datasheets/product-xyz.pdf`). You can also bind this to a Text Variable or Constant resource that holds the URL.
3. **Set Title (Optional):** Set the **Title** property (e.g., "Product XYZ Datasheet").
{% hint style="warning" %}
**Key Considerations**
* **Permissions (Salesforce Files):** If using `ContentDocumentId`, ensure users viewing the page have the necessary Salesforce permissions to access that specific File record.
* **URL Accessibility:** If using a URL, verify the URL is correct, publicly accessible (or accessible within the user's network), and consider potential Cross-Origin Resource Sharing (CORS) restrictions that might prevent embedding. Use HTTPS.
* **⚠️ Salesforce File Handling Setting****:** In Salesforce Setup, navigate to **"File Upload and Download Security"**. Ensure the behavior for **PDF** files is set to **"Execute in Browser"**. If it is configured as "Download", this component may not display the PDF inline and may instead trigger a file download.
* **Base64 Performance/Limits:** Avoid using Base64 for large PDFs due to performance impacts and potential size limitations. `ContentDocumentId` or `URL` are generally preferred.
* **Browser Compatibility:** PDF rendering relies on browser capabilities or built-in PDF viewers. Ensure compatibility with your users' standard browsers
{% endhint %}
## URL Display Restrictions & Workaround
When using a direct URL as the PDF source, be aware that **Salesforce security settings or browser policies** might sometimes prevent the PDF from displaying correctly within the PDF Viewer. In such cases, users may encounter a blank frame or an error message.
**Workaround: Embed using Google Docs Viewer**
To bypass these restrictions, you can leverage the Google Docs Viewer service, which allows PDF files to be displayed within an iframe, even if the original file's direct embedding is blocked.
**How to Use:**
Set the **Source** property of the PDF Viewer to a Google Docs Viewer link structured as follows (can be done using a formula text variable)
```
https://docs.google.com/gview?embedded=true&url=[your PDF URL]
```
**Example:**
```
https://docs.google.com/gview?embedded=true&url=https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf
```
{% hint style="warning" %}
**Important**
To allow this workaround, ensure that `https://docs.google.com` is added to your list of **Trusted URLs** in Salesforce Setup, and that `docs.google.com` is authorized for iframe usage within your org's security policies.
{% endhint %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/dynamic-components/components/pdf-viewer.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.