Open and Display PDFs in a Salesforce Lightning Web Component

PSPDFKit for Salesforce enables you to open files from your local machine, Salesforce, or an external URL.

Open a file in Salesforce in one of the following ways:

• Using the built-in user interface (UI), you can open files from your local machine or Salesforce.

• Programmatically, you can open files from Salesforce or an external URL.

For more information on uploading documents to Salesforce, see the Salesforce documentation.

Opening Files Using the Built-In UI

You can open files using the built-in UI in one of the following ways:

• From a document record page

• From an account page

• Using the PSPDFKit file selector

Opening a File from a Document Record Page

To add the PSPDFKit button to document record pages, follow the steps outlined below. You only need to do this once.

1. In Salesforce, go to Files.

2. To the right of one of the files in the list, click the down chevron, and click View File Details.

3. In the top-right corner, click Setup > Edit Page.

4. In the list of components on the left, find pspdfkitEditButtonSolution, and drag it to the appropriate place on the page.

5. Optional: Select the color of the button and determine whether it opens in a new tab.

6. Click Save.

To open a file from a document record page, follow these steps:

1. In Salesforce, go to Files.

2. To the right of one of the files in the list, click the down chevron, and click View File Details.

3. Click Edit File with PSPDFKit.

Opening a File from an Account Page

To add the PSPDFKit button to account pages, follow the steps outlined below. You only need to do this once.

1. In Salesforce, go to Objects and Fields > Object Manager.

2. Click Account.

3. In the left navigation panel, click Page Layouts.

4. In the list, click Account Layout.

5. Click Mobile & Lightning Actions.

6. Drag Edit files with PSPDFKit to the Salesforce Mobile and Lightning Experience Actions area.

7. Click Save.

To open a file from an account page, follow these steps:

1. In Salesforce, go to Accounts.

2. Click one of the accounts in the list.

3. Click Edit Files with PSPDFKit.

4. Find the file in the list and click Edit with PSPDFKit.

Opening a File Using the PSPDFKit File Selector

Using the PSPDFKit file selector, you can open files from your local machine or Salesforce.

To open a file using the PSPDFKit file selector, follow these steps:

1. Ensure you’re logged in as a user authorized to use PSPDFKit.

2. In the top-right corner, open the App Launcher.

3. Search for and select PSPDFKit.

4. Click browse to upload local PDF files, or open a file from Salesforce.

Opening Files Programmatically

Programmatically, you can open files in one of the following ways:

• From Salesforce

• From an external URL

Opening Files Programmatically from Salesforce

Before continuing, perform all of the following actions:

• If you’ve deployed PSPDFKit for Salesforce to an existing project, ensure that you added the file selector to your project.

• Ensure you’re logged in to Salesforce as a user authorized to use PSPDFKit.

To open files from Salesforce programmatically, follow these steps.

1. In Salesforce, click the Files tab.

2. Right-click the file in the list, and click Copy Link Address.

3. The URL in the copied text is similar to https://YOUR_SALESFORCE_ORG.lightning.force.com/lightning/r/ContentDocument/DOCUMENT_ID/view. Use the DOCUMENT_ID part of the URL.

4. In your text editor, open the PSPDFKit_InitPSPDFKit.page Visualforce page within the force-app/main/default/pages folder, and then paste the following within the script tag. Replace DOCUMENT_ID with the document ID:

<script type="text/javascript">
  ... openSalesforceFile(DOCUMENT_ID)
</script>

5. Run the following command in the terminal to start the Salesforce authentication process:

sfdx update
sfdx org:login:web --alias mySalesforceOrg --instance-url https://login.salesforce.com --set-default

6. In the browser window that opens, log in to your Salesforce organization and authorize the Salesforce CLI.

7. In the terminal, run the following command from the PSPDFKit for Salesforce project’s root folder:

sfdx force:source:deploy -x manifest/package.xml

As a result, the selected document automatically opens when the PSPDFKit file selector page loads.

Opening Files Programmatically from an External URL

To open files from an external URL programmatically, follow these steps.

1. Check the Access-Control-Allow-Origin response header from the server that serves the file, and ensure that Salesforce is allowed to load the file.

2. In your text editor, paste the following to the Visualforce page where you want the file to open. Replace https://example.com/source.pdf with the URL of the file you want to open:

<script type="text/javascript">
    PSPDFKit.load({
        baseUrl: `${window.location.protocol}//${window.location.host}{!$Resource.PSPDFKit_lib}/`,
        container: "#pspdfkit",
        document: "https://example.com/source.pdf",
        disableWebAssemblyStreaming: true,
        productId: PSPDFKit.ProductId.Salesforce
    })
</script>

3. Run the following command in the terminal to start the Salesforce authentication process:

sfdx update
sfdx org:login:web --alias mySalesforceOrg --instance-url https://login.salesforce.com --set-default

4. In the browser window that opens, log in to your Salesforce organization and authorize the Salesforce CLI.

5. In the terminal, run the following command from the PSPDFKit for Salesforce project’s root folder:

sfdx force:source:deploy -x manifest/package.xml

With PSPDFKit for Salesforce, you’ll soon be able to open and display Word, Excel, and PowerPoint files natively in Salesforce Lightning without adding server-side dependencies. The Salesforce SDK already supports an array of document processing capabilities for PDFs. For more information, see our Salesforce PDF library.

PSPDFKit for Salesforce enables you to open files from your local machine, Salesforce, or an external URL.

Open a file in Salesforce in one of the following ways:

• Using the built-in user interface (UI), you can open files from your local machine or Salesforce.

• Programmatically, you can open files from Salesforce or an external URL.

For more information on uploading documents to Salesforce, see the Salesforce documentation.

Opening Files Using the Built-In UI

You can open files using the built-in UI in one of the following ways:

• From a document record page

• From an account page

• Using the PSPDFKit file selector

Opening a File from a Document Record Page

To add the PSPDFKit button to document record pages, follow the steps outlined below. You only need to do this once.

1. In Salesforce, go to Files.

2. To the right of one of the files in the list, click the down chevron, and click View File Details.

3. In the top-right corner, click Setup > Edit Page.

4. In the list of components on the left, find pspdfkitEditButtonSolution, and drag it to the appropriate place on the page.

5. Optional: Select the color of the button and determine whether it opens in a new tab.

6. Click Save.

To open a file from a document record page, follow these steps:

1. In Salesforce, go to Files.

2. To the right of one of the files in the list, click the down chevron, and click View File Details.

3. Click Edit File with PSPDFKit.

Opening a File from an Account Page

To add the PSPDFKit button to account pages, follow the steps outlined below. You only need to do this once.

1. In Salesforce, go to Objects and Fields > Object Manager.

2. Click Account.

3. In the left navigation panel, click Page Layouts.

4. In the list, click Account Layout.

5. Click Mobile & Lightning Actions.

6. Drag Edit files with PSPDFKit to the Salesforce Mobile and Lightning Experience Actions area.

7. Click Save.

To open a file from an account page, follow these steps:

1. In Salesforce, go to Accounts.

2. Click one of the accounts in the list.

3. Click Edit Files with PSPDFKit.

4. Find the file in the list and click Edit with PSPDFKit.

Opening a File Using the PSPDFKit File Selector

Using the PSPDFKit file selector, you can open files from your local machine or Salesforce.

To open a file using the PSPDFKit file selector, follow these steps:

1. Ensure you’re logged in as a user authorized to use PSPDFKit.

2. In the top-right corner, open the App Launcher.

3. Search for and select PSPDFKit.

4. Click browse to upload local PDF files, or open a file from Salesforce.

Opening Files Programmatically

Programmatically, you can open files in one of the following ways:

• From Salesforce

• From an external URL

Opening Files Programmatically from Salesforce

Before continuing, perform all of the following actions:

• If you’ve deployed PSPDFKit for Salesforce to an existing project, ensure that you added the file selector to your project.

• Ensure you’re logged in to Salesforce as a user authorized to use PSPDFKit.

To open files from Salesforce programmatically, follow these steps.

1. In Salesforce, click the Files tab.

2. Right-click the file in the list, and click Copy Link Address.

3. The URL in the copied text is similar to https://YOUR_SALESFORCE_ORG.lightning.force.com/lightning/r/ContentDocument/DOCUMENT_ID/view. Use the DOCUMENT_ID part of the URL.

4. In your text editor, open the PSPDFKit_InitPSPDFKit.page Visualforce page within the force-app/main/default/pages folder, and then paste the following within the script tag. Replace DOCUMENT_ID with the document ID:

<script type="text/javascript">
  ... openSalesforceFile(DOCUMENT_ID)
</script>

5. Run the following command in the terminal to start the Salesforce authentication process:

sfdx update
sfdx org:login:web --alias mySalesforceOrg --instance-url https://login.salesforce.com --set-default

6. In the browser window that opens, log in to your Salesforce organization and authorize the Salesforce CLI.

7. In the terminal, run the following command from the PSPDFKit for Salesforce project’s root folder:

sfdx force:source:deploy -x manifest/package.xml

As a result, the selected document automatically opens when the PSPDFKit file selector page loads.

Opening Files Programmatically from an External URL

To open files from an external URL programmatically, follow these steps.

1. Check the Access-Control-Allow-Origin response header from the server that serves the file, and ensure that Salesforce is allowed to load the file.

2. In your text editor, paste the following to the Visualforce page where you want the file to open. Replace https://example.com/source.pdf with the URL of the file you want to open:

<script type="text/javascript">
    PSPDFKit.load({
        baseUrl: `${window.location.protocol}//${window.location.host}{!$Resource.PSPDFKit_lib}/`,
        container: "#pspdfkit",
        document: "https://example.com/source.pdf",
        disableWebAssemblyStreaming: true,
        productId: PSPDFKit.ProductId.Salesforce
    })
</script>

3. Run the following command in the terminal to start the Salesforce authentication process:

sfdx update
sfdx org:login:web --alias mySalesforceOrg --instance-url https://login.salesforce.com --set-default

4. In the browser window that opens, log in to your Salesforce organization and authorize the Salesforce CLI.

5. In the terminal, run the following command from the PSPDFKit for Salesforce project’s root folder:

sfdx force:source:deploy -x manifest/package.xml