compdf-web-example-salesforce

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

compdf-web-example-salesforce

★ 94 Open GitHub ↗

ComPDF SDK for Web (Salesforce) — embed a full PDF viewer as a Lightning Web Component. Users can view, annotate, sign, and manage PDF files directly in Salesforce without plugins or downloads.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ComPDF SDK for Web (Salesforce Example)

As part of the KDAN ecosystem, ComPDF Salesforce SDK enables you to open PDF file inside Salesforce. This unlocks the full functionality of ComPDF Web SDK in Salesforce, including view, annotations, manipulate, and signatures PDF.

This README explains how to integrate ComPDF Web SDK into a new Salesforce project. The integration works as a [Lightning web component (LWC)](https://developer.salesforce.com/docs/component-library/documentation/en/lwc) that you can add to any Salesforce organization.

ComPDF Salesforce SDK shares the same APIs as ComPDF Web SDK Standalone. For more information on customizing your Salesforce application, see the [ComPDF SDK for Web Standalone documentation](https://www.compdf.com/guides/pdf-sdk/web/overview?utm_source=github_readme_web_example_salesforce&utm_medium=referral&utm_campaign=github_readme_web_example_salesforce).

> If you find this library helpful, please consider giving us a ⭐ **Star** on GitHub! Have feedback or questions? Join the conversation in our [Discussions](https://github.com/ComPDFKit/compdf-web-example-salesforce/discussions).

![webui](https://www.compdf.com/images/platform/web/webDemo@2x.png)

**Why ComPDF SDK?**

* **Easy to Integrate:** Integrate PDF functionalities easily with our powerful SDK and clear documentation and guides with few lines of code.

* **Fully Customizable UI:** Design a unique interface for your products with fully customizable UI source code by a high-performing SDK.

* **[Comprehensive PDF Features:](https://www.compdf.com/pdf-sdk/features-list?utm_source=github_readme_web_example_salesforce&utm_medium=referral&utm_campaign=github_readme_web_example_salesforce)** Supports generation, viewing, annotation, page editing, content editing, conversion, OCR, redaction, signing, forms, parsing, measurement, compression, comparison, color separation, batch processing, and more.

* **Faster Time-to-Market:** Comprehensive SDK libraries save your time and expenses and roll out your applications and projects.

* **High-quality Service:** We provide 24/7 professional one-to-one technical support, including onsite service and remote assistance via phone and email.

## Table of Contents

- [Supported Features](#supported-features)
- [Obtain your license key](#obtain-your-license-key)
- [Requirements](#requirements)
- [Deploying the Package to your Salesforce](#deploying-the-package-to-your-salesforce)
- [Changing the Security Settings](#changing-the-security-settings)
- [Using the ComPDF Web SDK in Salesforce](#using-the-compdf-web-sdk-in-salesforce)
- [Implementation Details for Developers](#implementation-details-for-developers)
  - [Communicating with CoreControls from Lightning Web Component](#communicating-with-corecontrols-from-lightning-web-component)
- [Changelog](#changelog)
* [Support](#support)
* [Related](#related)

## Supported Features

* **Viewer**:
  
  * Fast and smooth PDF rendering and viewing
  
  * Display Modes - single/double page, vertical & horizontal scrolling, cover mode, crop mode
  
  * Text Search & Selection
  
  * PDF Navigation - outlines, bookmarks

* **Annotations**:
  
  * Notes - add longer comments with adjustable icon shape and color
  
  * Ink - freehand drawing with customizable color, opacity, line thickness
  
  * Text - add, move, resize text directly on page
  
  * Inspector - adjust annotation looks (line styles, borders, colors, opacity, font)
  
  * Comment on Annotations and Update Status
  
  * Import & Export & Flatten Annotations (XFDF, FDF, JSON)
  
  * Highlight, Underline, Strikeout, Squiggly
  
  * Shapes - Rectangle, Oval, Line, Arrow, Polygon, Polyline, Cloud
  
  * Stamps, Sound, Movie, File Attachment, Link, Distance, Perimeter, Area

* **Document Editor**:
  
  * Page manipulation - insert, delete, rotate, reorder, extract, crop
  
  * Split PDF, Merge PDF

* **Content Editor**: Edit PDF text and images directly like in Word

* **Signatures**:
  
  * Electronic Signatures - draw, type, image signatures
  
  * Digital Signatures - certificate-based signature validation

* **Forms**:
  
  * Process fillable and static PDF forms
  
  * Form filling, form creation, form flattening

* **Security**:
  
  * Encryption - set open password, permission password
  
  * Restrict printing, copying, editing

* **Redaction**: Permanently remove sensitive content from PDFs

* **Layers**: View, edit, display, lock, and export specific layers within a file

* **Color Separation**: Identify color models like CMYK, PMS. Toggle color visibility and view details.

* **Measurement**: Distance, area, perimeter measurement tools

* **Compare Documents**: Side-by-side document comparison to highlight differences

## Obtain your license key

ComPDF SDK for Web supports flexible licensing options. You can click to [apply for a license online](https://www.compdf.com/pricing?utm_source=github&utm_medium=compdf-web-example-salesforce&utm_campaign=compdf_web_example_salesforce_repo&ref_platform_id=github_compdfkit). You can refer to our [license help guide](https://www.compdf.com/faq/how-can-I-get-a-license-key?utm_source=github&utm_medium=compdf-web-example-salesforce&utm_campaign=compdf_web_example_salesforce_repo&ref_platform_id=github_compdfkit) to obtain a license key.

If you need more information, you can [contact our sales team](https://www.compdf.com/contact-sales?utm_source=github&utm_medium=compdf-web-example-salesforce&utm_campaign=compdf_web_example_salesforce_repo&ref_platform_id=github_compdfkit). Each license is valid only for the root domain name and any of its subdomains. Please note that it is not allowed to distribute any documents, sample code, or source code from the ComPDF SDK package to third parties.

## Requirements

Before continuing, perform all of the following actions:

* Install the [Salesforce CLI]([Salesforce Developers | Salesforce CLI | Developer](https://developer.salesforce.com/tools/salesforcecli)).
* Install the [latest stable version of Node.js](https://nodejs.org/en/download/) and NPM.

## Deploying the Package to your Salesforce

To deploy the ComPDF Web SDK package to your Salesforce organization, follow these steps.

1. Set up your Salesforce development environment. Follow the instructions in the [Setup Development Guide](https://developer.salesforce.com/docs/platform/lwc/guide/install-setup-develop.html) or in the [Setup Development Trailhead](https://trailhead.salesforce.com/content/learn/projects/set-up-your-lightning-web-components-developer-tools/install-development-tools) Trailhead module. The steps include:
  
  * [Enable Dev Hub in you project](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_setup_enable_devhub.htm).
  * [Install Salesforce CLI](https://developer.salesforce.com/tools/salesforcecli). Or see the [Salesforce CLI Setup Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup) for complete installation instructions.
  * (Optional) [Install Salesforce Extensions for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode).
2. Clone the ComPDF Salesforce SDK repository from GitHub repo:

```bash
   git clone https://github.com/ComPDFKit/compdf-web-example-salesforce.git
   ```

3. In the terminal, go to the ComPDF Salesforce SDK project folder and run the following command to install the npm module.

```bash
   npm install
   ```

4. The ComPDF Salesforce SDK integration example now makes use of the ComPDF Web SDK available from our server at `https://static.compdf.com`, which means it's no longer limited by Salesforce's upload assets size 5MB limit.
   
   In order to set the ComPDF Web SDK version you want to use, open `./force-app/main/default/lwc/compdfViewer/compdfViewer.js` and edit the [line 16](./force-app/main/default/lwc/compdfViewer/compdfViewer.js#L16) to reflect the ComPDF Web SDK version. For example, in order to use version 2.8.2, you should change the URL pointing to the CDN to:
   ```js
   @api assetBase = 'https://static.compdf.com/compdf-webviewer@2.8.2'
   ```

5. If you have a paid license key, you can add the `licenseKey` property value to the `WebViewer` constructor here [`./force-app/main/default/lwc/compdfViewer/compdfViewer.js`](./force-app/main/default/lwc/compdfViewer/compdfViewer.js#L13).

```js
   licenseKey: 'YOUR_LICENSE_KEY'
   ```

6. If you have not already done so, authenticate with your hub org and provide it with an alias (**DevHub** in the command below):

```bash
   sf org login web --set-default-dev-hub --alias DevHub
   ```

7. Enter your Dev Hub org credentials in the browser that opens. After you log in successfully, you can close the browser. Create a scratch org using the `config/project-scratch-def.json` file, set the **username** as your default, and assign it an alias(**"myScratchOrg"** in the command below).

```bash
   sf org create scratch --definition-file config/project-scratch-def.json --set-default --target-dev-hub DevHub --alias myScratchOrg
   ```

8. Push the app to your scratch org:

```bash
   sf project deploy start --source-dir force-app --target-org myScratchOrg --concise
   ```

9. Open the scratch org:

```bash
   sf org open --target-org myScratchOrg
   ```

10. (Optional) If you need to upload or save large files (over 6 MB), it is recommended to add your **Access Token** to the `accessToken` property in the [`./force-app/main/default/lwc/compdfViewer/compdfViewer.js`](./force-app/main/default/lwc/compdfViewer/compdfViewer.js#L19) file. You can view your org information and obtain the **Access Token** by running the following command:

```bash
   sf org display --target-org myScratchOrg
   ```

```js
   accessToken = 'YOUR_ACCESS_TOKEN'
   ```

Next, we still need to do some configuration in your Salesforce organization setup.

## Changing the Security Settings

ComPDF Salesforce SDK example uses resource packages provided by our third-party server, it is necessary to add trusted URLs in Salesforce. To change the default security settings, follow these steps.

1. In Salesforce, go to **Security** > **Trusted URLs**.

2. Click **New Trusted URL**.
   
3. Configure URL properties：
   - Customize an **API name**, such as **"ComPDF"**.
   - Write the following URL in the **URL** input box.
    ```url
    https://static.compdf.com
    ```
   - Ensure that the **'Active'** attribute is checked, and check all **CSP directives**.

4. Click on **Save**.

## Using the ComPDF Web SDK in Salesforce

Then you can use ComPDF Web SDK in your opening scratch organization:

1. Click the app launcher icon in the top left, and select **ComPDF**. Then you should see the application start up.

![ComPDF App](https://raw.githubusercontent.com/ComPDFKit/compdf-web-example-salesforce/main/misc/ComPDF-app.png "ComPDF App")

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

![WebViewer](https://raw.githubusercontent.com/ComPDFKit/compdf-web-example-salesforce/main/misc/webviewer.png "WebViewer")

## Implementation Details for Developers

### Communicating with CoreControls from Lightning Web Component
On the Salesforce platform, Lightning Web Component have limits accessing to WebViewer's `iframe` due to [LockerService][lockerService] requirements. Lightning Component can use limited communication mechanism between components using [`postMessage`][postMessage].

Here is implementation of the `postMessage` mechanism used in our sample github project and you can use this similar approach to communicate with the `iframe`'s `contentWindow`.

Inside `config.js` file, use following:
```js
window.addEventListener('message', receiveMessage, false);

In the Lightning Web Component send messages with postMessage as following:
```js
import { LightningElement, api, wire } from 'lwc'
import BOOT from '@salesforce/resourceUrl/compdf_boot'

export default class CompdfViewer extends LightningElement {

async initViewer() {
    const container = this.template.querySelector('.pdf_viewer')

window.ComPDFKitViewer?.init({
      pdfUrl: this.pdfUrl,
      license: this.licenseKey,
      path: this.assetBase,
      config: window.location.origin + BOOT + '/config.js'
    }, container)

container.addEventListener('ready', () => {
      this.iframeWindow = container.querySelector('iframe').contentWindow
    })
  }

handleFileSelected(data) {
    this.iframeWindow.postMessage({ type: 'OPEN_DOCUMENT', ...data }, '*')
  }
}
```

## Changelog

Go to our [changelog](https://www.compdf.com/pdf-sdk/changelog-web?utm_source=github_readme_web_example_salesforce&utm_medium=referral&utm_campaign=github_readme_web_example_salesforce) to keep up with the latest updates, improvements, and bug fixes.

## Support

ComPDF has a professional R&D team that produces comprehensive technical documentation and guides to help developers. Also, you can get an immediate response when reporting your problems to our support team.

* For detailed information, please visit our [Guides](https://www.compdf.com/guides/pdf-sdk/web/overview?utm_source=github_readme_web_example_vuejs&utm_medium=referral&utm_campaign=github_readme_web_example_vuejs) page.

* For technical assistance, please reach out to our [Technical Support](https://www.compdf.com/support?utm_source=github_readme_web_example_vuejs&utm_medium=referral&utm_campaign=github_readme_web_example_vuejs).

* To get more details and an accurate quote, please contact our [Sales Team](https://compdf.com/contact-sales?utm_source=github_readme_web_example_vuejs&utm_medium=referral&utm_campaign=github_readme_web_example_vuejs).

## Related

* Download [ComPDF SDK for Web](https://www.npmjs.com/package/@compdfkit_pdf_sdk/webviewer) in npm.

* [Online Demo of ComPDF SDK](https://www.compdf.com/webviewer/demo?utm_source=github_readme_web_example_vuejs&utm_medium=referral&utm_campaign=github_readme_web_example_vuejs)

* Integrate ComPDF SDK for Web into [Salesforce](https://www.compdf.com/pdf-sdk/salesforce?utm_source=github_readme_web_example_vuejs&utm_medium=referral&utm_campaign=github_readme_web_example_vuejs), [SharePoint](https://www.compdf.com/pdf-sdk/sharepoint?utm_source=github_readme_web_example_vuejs&utm_medium=referral&utm_campaign=github_readme_web_example_vuejs), [Microsoft Teams](https://www.compdf.com/contact-sales?utm_source=github_readme_web_example_vuejs&utm_medium=referral&utm_campaign=github_readme_web_example_vuejs), etc.

* [How to integrate ComPDF SDK for Web into a Vue.js project](https://www.compdf.com/blog/integrate-compdfkit-web-sdk-in-vuejs-app?utm_source=github_readme_web_example_vuejs&utm_medium=referral&utm_campaign=github_readme_web_example_vuejs)

* [ComPDF SDK for Web - Standalone Deployment](https://www.compdf.com/blog/compdfkit-standalone-deployment-for-web?utm_source=github_readme_web_example_vuejs&utm_medium=referral&utm_campaign=github_readme_web_example_vuejs)

* Recognize and extract data from PDFs with our online [Extract Demo](https://www.compdf.com/pdf-extract/demo?utm_source=github_readme_web_example_vuejs&utm_medium=referral&utm_campaign=github_readme_web_example_vuejs)

compdf-web-example-salesforce

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README