How to Integrate a PDF SDK into SharePoint

SharePoint is arguably a great place to store files, but working on files stored in SharePoint is another story. The built-in SharePoint previewer is just a visual check. It’s fine for seeing if you’ve got the right invoice, but you can’t leave a comment, merge two files together, or sign anything legally. This is what forces people to move files to their local "Downloads" folder. Once a sensitive contract is on a laptop’s hard drive, your IT department has officially lost the trail.

In this blog, we’ll look at why you’d want to integrate a PDF SDK like the Apryse Web SDK into SharePoint, how to do it, and some commonly asked questions.

When you integrate a PDF SDK like the Apryse Web SDK into the SharePoint Framework (SPFx), you're adding a full workstation into the browser. This adds high-fidelity viewing for 30+ formats, including Office and CAD files, without needing the original apps. You can split a 50-page scan, rotate a stray page, or redact PII.

Security is the biggest hurdle for any SharePoint admin. The beauty of a WebAssembly (WASM) setup is that it's entirely client-side.

When a user clicks Open, the document is pulled using the Microsoft Graph API and rendered right in the browser. Any changes, like a signature or a redacted line, are saved directly back to the library. No document ever leaves your secure SharePoint environment to be processed by an external server.

Think about the tasks that currently take ten minutes and three apps:

Merging Files: Taking five separate PDF reports from different departments and combining them into a single, board-ready document without leaving the browser.

Redaction: Permanent scrubbing of a client's address from a contract before it gets shared externally.

CAD Markup: Letting an architect or engineer mark up a drawing (DWG/RVT) without needing to install a $2,000 desktop viewer.

The smartest part of this approach is that the same WebViewer you set up here is the same one that works in Salesforce, Mendix, or your own custom-built apps. You get a single licensing relationship and, more importantly, a consistent experience for your users regardless of which portal they’re logged into.

Setting this up isn't difficult, but there's a specific workflow. You use the standard SPFx toolchain, clone the integration repo, and point it at your tenant.

The one thing that catches everyone off guard is the "Custom Script" toggle. You have to turn it on in the SharePoint Admin Center, and it can take up to 24 hours to kick in. Once that's live, you can deploy the viewer as a web part or add an Open in Apryse menu option directly to the document library toolbar.

In this example, we’ll integrate Apryse WebViewer into SharePoint Online as a web part. We’ll need to clone the SharePoint sample repository and then integrate WebViewer with the clone.

As with most projects, there’s a few things we need to get out of the way before we start into the main part.

Note: For help on setting up a SharePoint dev environment, see the following:

Now let’s get started.

1. Make sure that you're running Node.js v22.21.0 or newer. You can check by running the following in the console:

2. Enable using custom scripts with the following code in the SharePoint Online Management Shell:

The following are placeholder variables for the SharePoint Environment:

Note: It may take up to 24 hours for the configuration to complete.

3. In the Document Library of your SharePoint site, create a WebViewer folder.

4. In the WebViewer folder, create a js folder.

5. Copy the lib folder from the extracted WebViewer.zip file to the js folder you created.

Note: The WebViewer lib folder is now available from the url https://.sharepoint.com/sites//Shared Documents/WebViewer/js/lib.

1. Clone the sharepoint-integration-examples sample from github:

2. Switch to the sharepoint-web-part folder and install gulp, yeoman and Microsoft SharePoint Generator using npm:

3. Use the following command to install all the packages:

4. In the sharepoint-web-part folder, create a .env file and include the following parameters in the file:

5. In the sharepoint-web-part/config/serve.json file, change the initialPage property to your tenant id and SharePoint site name.

6. Start the web part in the workbench with the following code:

Note: If this is your first time setting up the SharePoint Framework, you must call the following code:

With your local SharePoint instance running, you should now see a blank SharePoint canvas.

You can add an Apryse WebViewer web part by adding a new web part to the page and selecting the webviewer web part.

With the web part added, you can now open a local file in WebViewer.

1. Run the following code to generate the webviewer.sppkg file in the sharepoint-web-part/sharepoint folder:

2. Switch to the SharePoint admin center and go to the More features page.

Note: It should be https://<your-tenant-id>-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/classicFeatures.

3. Under the App section, click Open.

4. To upload the webviewer.sppkg file, click Upload and then select the webviewer.sppkg file in the sharepoint/solution folder.

5. After uploading the file, enable the app by selecting Only enable this app.

6. Click Settings in the SharePoint site and then click Add an app.

7. In My Apps, enable the webviewer-client-side-solution.

8. To create a new site page in the SharePoint site, click + New and then select Site Page.

9. Rename the page to WebViewer and then add a one-column section.

10. In the new section, click +, select the webviewer web part, and then publish the page.

Next, we’ll look at adding an Open in Apryse menu option to open and process documents in the SharePoint Documents Library in WebViewer. To do this, we need to integrate with SharePoint extension. This allows you to add a menu option to any List View in SharePoint, such as your document libraries.

1. In the sharepoint-extension folder in the sharepoint-integration-examples repository, create a .env file and add the following parameters in the file:

2. In the sharepoint-extension in the terminal, run the following:

3. In the sharepoint-extension/config folder, change the pageUrl in the serve.json file by replacing the tenant id and site name:

4. Run the following command:

You will see a new window in the Document Library and a popup and warning for you to allow debug scripts.

5. Select Load debug scripts.

Now when you right-click a document in the Document Library, you’ll see the option to Open in Apryse.

7. Click Open in Apryse and it will direct you to the page you specified in the .env file. In this case, it should be the https://<your-tenant-id>.sharepoint.com/sites/<site-name>/SitePages/<site-page>.aspx page that has the webviewer web part.

Note: SharePoint Framework currently has issues hosting workbench on any port other than 4321, making it difficult to have the web part and the extension running locally at the same time. To solve for this, we recommend deploying either the web part or the extension and host the other one locally.

Here, we’ll look at how to deploy the extension.

1. Use the following commands to generate the sharepoint-extension.sppkg file in the sharepoint-extension/sharepoint/solution folder:

2. Upload the sharepoint-extension.sppkg file to the Apps in SharePoint Admin center and enable it for the website.

You should now see an option to Open in Apryse when you right-click a document in the Document Library.

Is it hard to keep versions straight?

Not at all. The SDK hooks into SharePoint’s native versioning. When you save an edit, it can either overwrite the current version or save as a new one, keeping your audit trail intact.

Does this work on mobile?

Yes. Since it’s a browser-based viewer using WASM, it works on any modern mobile browser without requiring a separate app installation.

Can I customize the UI?

Yes. You can hide buttons, like Download or Print, based on user permissions in SharePoint, ensuring that sensitive files are viewed but not leaked.

As you can see, integrating the Apryse Web SDK into SharePoint is fairly straightforward and can be done with minimal coding.

By adding a professional PDF SDK, like the Apryse Web SDK, you can eliminate the export-upload loop and keep your data safe in your own environment. It’s a cleaner, more secure way to manage and edit documents in a high-powered document platform.

WebViewer has many powerful features that can be extended to your documents now that it’s integrated with SharePoint, such as digital signatures, redaction, annotation, and more.

Check out our WebViewer demo or get started with the Apryse Web SDK.

You can also contact our sales team for any questions and support.