Getting started on Web Integrations

Integrate into SharePoint Online as a Web Part

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into SharePoint Online pages using a web part. By the end of this guide, you’ll be able to use a web browser to directly open PDF documents stored in SharePoint, as well as display, edit, and save them back to SharePoint.

PSPDFKit for SharePoint is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.

PSPDFKit for SharePoint shares the same APIs as PSPDFKit for Web Standalone, so use the Web documentation when customizing your SharePoint application.

Try Our No-Code App

Requirements

• A Microsoft 365 tenant (you can set up a Microsoft 365 tenant for free when you join the Microsoft 365 Developer Program)

• The SharePoint Framework

• A GitHub account (for cloning the PSPDFKit for SharePoint repository)

• Node.js version 16.19.0

Setup

1. Clone the pspdfkit-sp-online-webpart repository from GitHub.

Navigate to the directory where you want to place the SharePoint integration, and type the following command in your command line/terminal:

git clone https://github.com/PSPDFKit/pspdfkit-sp-online-webpart.git

Alternatively, you can download the project as a .zip file without cloning the project.

2. Navigate to admin.microsoft.com and sign in to your tenant account.

To make the SharePoint catalog available, click Show All… in the side navigation, and find Admin centers > SharePoint. This will direct you to SharePoint Admin portal.

Follow along with this tutorial from Microsoft to configure your SharePoint tenant and create your new team site.

3. To configure your URL, go to the config/serve.json file in your pspdfkit-sp-online-webpart project and change enter-your-SharePoint-site to the URL of your SharePoint site:

"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",

4. Now, set up your development environment to build a client-side web part.

Don’t forget to execute gulp trust-dev-cert from the root of your project to trust the self-signed developer certificate.

5. Change your directory into the pspdfkit-sp-online-webpart directory:

cd pspdfkit-sp-online-webpart

6. Open the project in your preferred code editor and check which version of Node.js you’re using:

node --version

Make sure you have Node.js version 16.19.0 installed. If you’re using a different version of Node, switch to Node.js version 16.19.0 via nvm (node version manager) or asdf.

💡 Tip: If you’re using asdf, you can switch the Node version locally for this project. First, install Node.js 16.19.0 using the following command:

asdf install nodejs 16.19.0

Now, run asdf local nodejs 16.19.0 to switch to the Node.js version you just installed. This will create a .tool-versions file in the root of your project with Node version 16.19.0. If you encounter any issues, check out the asdf documentation.

💡 Tip: If you’re using nvm, you can switch to Node.js 16.19.0 by typing the following command:

nvm use 16.19.0

7. Install the dependencies:

npm install

8. To serve the project, type:

npm run serve

The browser will open a new tab with your SharePoint account.

Integrating PSPDFKit into SharePoint

PSPDFKit can be added to your project as a widget. You can add it to your project using the UI elements.

Refer to the following video for information on how to integrate the PSPDFKit widget into your project, or continue with the instructions.

1. On your Home page, in the upper right-hand corner, find the Edit button.

2. Click the Edit button. This will open the Editing interface.

3. To add the PSPDFKit widget, hover over where you want to place it. This will display a plus icon. When you click the plus icon, it’ll open a dialog box with the possible web parts you can incorporate into your project.

4. Search for the PSPDFKit widget and click on it.

5. Find the edit button with the pencil icon, and click Select Document from the open panel.

6. Choose your document and click Open. Now you’ll be able to see the PSPDFKit widget in your project like in the video above.

Using for Production

For production, you need to follow these steps to deploy into your SharePoint environment.

1. Run npm run bundle and then npm run package.

2. Then, follow the steps outlined in this SharePoint guide for packaging and deploying your web part. If a previous installation already exists, it’s recommended to remove it before proceeding.

Make sure to select Make this solution available to all sites in the organization. This appears in the confirmation dialog you’ll see after dragging the package.

3. To make the web part available in Microsoft Teams, synchronize your solution with Teams.

4. Navigate to the workbench of one of your SharePoint sites and add the PSPDFKit web part there.

5. There’s an issue getting SharePoint to bundle the static assets of PSPDFKit for Web under the correct subdirectory when using the SharePoint file system itself as your CDN instead of a custom one (you can specify a custom URL for the static assets under write-manifests.json), so you might see a network error when requesting one of the chunks for the PSPDFKit library.

If this happens, it’s because the pspdfkit-lib subdirectory hasn’t been created by SharePoint. To fix this, navigate to the erroring URL but trim its path before the pspdfkit-lib segment (i.e. https://<your-sharepoint-site>/sites/appcatalog/ClientSideAssets/<some-hash>) and create a pspdfkit-lib folder.

Then, you can copy the contents from ./sharepoint/solution/debug/ClientSideAssets/pspdfkit-lib to the newly created folder.

Make sure you have the latest version of PSPDFKit inside the pspdfkit-lib folder.

ℹ️ Note: As an alternative to this step, consider hosting the assets in a CDN and set it in the write-manifests.json file.

6. Your PSPDFKit instance should now work. Try opening your workbench and check if the PSPDFKit web part appears as part of the list of available web parts to add.

You can now begin customizing the user interface, implementing custom functionality, or adding a custom file handler for PDF files.

Next Steps

• Implementing a custom file handler

• Customizing the user interface

• Customizing annotation behavior

• Custom signature functionality

• Custom redaction automations

References

• Use Microsoft Graph in your solution

• Publish SharePoint Framework applications to the marketplace

• Microsoft 365 Patterns and Practices — Guidance, tooling, samples, and open source controls for Microsoft 365 development

• Build your first SharePoint client-side web part

Integrate into SharePoint Online as a File Handler

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into SharePoint Online as a file handler.

File handlers instruct SharePoint to redirect to your URL of choice whenever a file with a particular extension is clicked. By using a file handler, you’ll override SharePoint’s default behavior so that PDF documents are opened directly inside your application. Any edits to the opened files using your application can then be directly saved back to SharePoint.

PSPDFKit for SharePoint is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.

PSPDFKit for SharePoint shares the same APIs as PSPDFKit for Web Standalone, so use the Web documentation when customizing your SharePoint application.

Try Our No-Code App

Requirements

• A Microsoft 365 tenant (you can set up a Microsoft 365 tenant for free when you join the Microsoft 365 Developer Program)

• The SharePoint Framework

• A GitHub account (for cloning the PSPDFKit for SharePoint repository)

• Node.js version 16.19.0

• A Microsoft Azure Active Directory account

• OpenSSL

• Admin privileges for the SharePoint tenant

• Microsoft Azure admin privileges

File handlers are registered centrally for the entire SharePoint tenant and cannot be selectively enabled or disabled. Uninstalling a file handler from the environment can be problematic due to aggressive caching and may take 24–48 hours to take effect.

Setup

1. Clone the pspdfkit-sp-online-filehandler repository from GitHub.

Navigate to the directory where you want to place the SharePoint integration, and type the following command in your command line/terminal:

git clone https://github.com/PSPDFKit/pspdfkit-sp-online-filehandler.git

Alternatively, you can download the project as a .zip file without cloning the project.

This project uses Next.js as a server-side framework; however, you can use any other server-side framework you like. The application serves as a native file handler of PDF documents for SharePoint sites.

Concretely, this server handles requests to open PDF documents from a SharePoint site and then proceeds to render an HTML page containing the PSPDFKit for Web Standalone viewer.

This project is based on the Markdown FileHandler example project.

Installation and Development Deployment

After cloning the repository, and before starting the development setup process, it’s worth understanding how the file handler architecture works.

Setup Application is a special helper application that needs to be registered in the Azure App Directory. However, it doesn’t represent the file handler app, rather it’s a helper to automate the process of creating the file handler. This helper app can later safely be removed from the environment.

Customizing the Manifest Specification

The file handler server is a regular server-side web application that handles requests initiated by SharePoint when users click files from the SharePoint Document Library.

The main important part around the file handler is the manifest file, which defines the URL that will handle the requests, how authentication will be handled, and what elements will be rendered in the SharePoint UI (e.g. the context menu item).

In this project, the final manifest is generated by a set of TypeScript scripts under the ./tools/local-setup directory. The entry point is ./tools/local-setup/bin/localsetup.ts. The result of this series of scripts is the automatic generation of the final file handler application registration in your Azure Active Directory.

There are certain key aspects that you can customize as part of the manifest (outlined below).

Display name of the menu — To change the string used when a file is selected, go to ./tools/local-setup/tasks/ensure-app.ts and change the value for the appDisplayName variable.

Login URL — To change the URL SharePoint uses to handle logging in, go to ./tools/local-setup/tasks/ensure-app.ts and change the value for redirectUris.

Logout URL — To change the URL SharePoint uses to handle logging out, go to ./tools/local-setup/tasks/ensure-app.ts and change the value for logoutUrls.

URL to edit a selected file — To change the URL SharePoint uses to handle redirection after a file is opened, go to tools/local-setup/tasks/inject-manifest.ts and change the value for the "url" field as part of the actions array (line 9). Notice how the file extension your file handler will operate on — in addition to other metadata — is also defined here.

Once these aspects are defined, you can proceed with the development environment preparation for the file handler.

Notice that, by default, you’re defining localhost:3000. This means SharePoint will, for the time being, always use that URL when selecting a file, which means you need to have your local development server running.

Later, there are instructions on how to change that server once a production deployment exists.

Development Setup

1. Change your directory into the pspdfkit-sp-online-filehandler directory:

cd pspdfkit-sp-online-filehandler

2. Open the project in your preferred code editor and check which version of Node.js you’re using:

node --version

Make sure you have Node.js version 16.19.0 installed. If you’re using a different version of Node, switch to Node.js version 16.19.0 via nvm (node version manager) or asdf.

💡 Tip: If you’re using asdf, you can switch the Node version locally for this project. First, install Node.js 16.19.0 using the following command:

asdf install nodejs 16.19.0

Now, run asdf local nodejs 16.19.0 to switch to the Node.js version you just installed. This will create a .tool-versions file in the root of your project with Node version 16.19.0. If you encounter any issues, check out the asdf documentation.

💡 Tip: If you’re using nvm, you can switch to Node.js 16.19.0 by typing the following command:

nvm use 16.19.0

3. Install the dependencies:

npm install

4. You need to set up a file handler app registration and load it with a manifest. To do this, you need to be an admin of a SharePoint tenant.

The app you're manually creating is used as a way of automating the registration of the actual file handler, but it isn’t the file handler itself. At a later point, you’ll no longer need this temporal app, and you can remove it from your Azure Active Directory.

5. Sign in to the Azure portal.

6. Switch to the tenant in which you want to register the application (if you have more than one).

7. Select Azure Active Directory.

8. Under Manage, select App registrations > New registration.

9. Give it an easy-to-find name (e.g. “filehandler localdev setup”).

10. Add API permissions:

• Microsoft Graph > Delegated permissions: openid, Directory.AccessAsUser.All.

• Grant admin consent to the permissions.

11. Under the Authentication section:

• Add a platform:

  • Add mobile and desktop applications.

  • Under Redirect URIs, select the MSAL only option.

• Set Allow public client flows to Yes. This will treat the app as a public client. Make sure this step isn’t skipped, as otherwise, the whole process will later fail when running your dev-setup script.

12. Copy the Application (client) ID and the Directory (tenant) ID, which you’ll need in the next step.

13. Make sure OpenSSL is installed on your system. Then, run npm run dev-setup, and supply the client and tenant IDs from the previous step when prompted. Follow the onscreen prompts to complete the device code authorization flow.

It’ll take 24–48 hours for the manifest change to take effect. You can follow these steps for clearing the cache to speed this up.

14. Once setup is complete, you can optionally delete the registration helper application or leave it in place for future use.

15. Running the dev-setup command in step 4 generates an .env.local file in the root of this project. Review the values and ensure it was created correctly. It’ll appear similar to what’s shown below:

IRON_SESSION_PASSWORD='{anything you want}'
NODE_ENV='production'
AAD_MSAL_AUTH_TENANT_ID="{app tenant id from step 3.9}"
AAD_MSAL_AUTH_ID="{app client id from step 3.9}"
AAD_MSAL_AUTH_SECRET="{app secret from step 3.9}"
NEXT_PUBLIC_FILEHANDLER_SITE_HOST_URL="https://localhost:3000"

16. Run npm run dev and launch the file handler from within OneDrive or the SharePoint document library on a .pdf file.

Production Deployment

Follow these steps when you want to upload the file handler into a production server after development.

1. Run npm run build from your terminal.

2. Deploy the Next.js application somewhere. For this, you can use Vercel, Heroku, AWS Amplify, Digital Ocean, or another self-hosting option.

3. Sign in to the Azure portal.

4. Go to the Azure Active Directory. Then, follow the App registrations link in the sidebar.

5. Select your existing application (created from step 3 of the development setup).

6. Select Manifest from the sidebar, as shown in the screenshot below.

7. Once in the manifest editor, search for the logoutUrl property and replace its value with the same path, but pointing to your production domain instead (the one your application was deployed to in step 2).

Search for the replyUrlsWithType array, and for objects with the url key, replace it to also point to your domain (but maintaining the path).

8. Click Save. Now the file handler is ready to be used in production.

Go to the SharePoint document library and try to open a PDF file. The file will be opened using the PSPDFKit viewer.

It’ll take 24–48 hours for the manifest change to take effect. You can follow these steps for clearing the cache to speed this up.

You can now begin customizing the user interface or implementing custom functionality.

Next Steps

• Customizing the user interface

• Customizing annotation behavior

• Custom signature functionality

• Custom redaction automations

Integrate into SharePoint On-Premises as a File Handler

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into SharePoint on-premises environments as a file handler.

File handlers are simple XML files that instruct SharePoint to redirect to your URL of choice whenever a file with a particular extension is clicked. By using a file handler, you’ll override SharePoint’s default behavior so that PDF documents stored in SharePoint are opened directly inside your application. Any edits to the opened files using your application can then be directly saved back to SharePoint.

PSPDFKit for SharePoint is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.

PSPDFKit for SharePoint shares the same APIs as PSPDFKit for Web Standalone, so use the Web documentation when customizing your SharePoint application.

Try Our No-Code App

Requirements

Hardware and operating system requirements are determined by the requirements of the SharePoint version you’re targeting, as well as the requirements of the Visual Studio version used for development. Both SharePoint Server and Visual Studio have to be installed on the developer machine.

The required Visual Studio versions for targeting different SharePoint versions are summarized in the following table. Up to Visual Studio 2017, the matching Microsoft Office Developer Tools needs to be manually downloaded and installed. For Visual Studio 2019 and 2022, the relevant components can be selected during installation of Visual Studio.

SharePoint Permissions Considerations

To develop SharePoint solutions, you must have sufficient permissions to run and debug them. Before you can test a SharePoint solution, take the following steps to ensure you have the necessary permissions:

1. Add your user account as an Administrator on the system.

2. Add your user account as a Farm Administrator for the SharePoint server.

• In SharePoint Central Administration, click the Manage the farm administrators group link.

• On the Farm Administrators page, click the New button.

3. Add your user account to the WSS_ADMIN_WPG group.

You can find more information by clicking the link that corresponds to your version of Visual Studio:

• Visual Studio 2012

• Visual Studio 2013

• Visual Studio 2017

• Visual Studio 2019

• Visual Studio 2022

Creating a New Project

A new project has to be created in Visual Studio. The project can then be deployed to and debugged in your selected SharePoint environment. The project can also be published to create an installable SharePoint solution package (.wsp).

The example here uses Visual Studio 2019, but SharePoint project templates are also available in earlier versions (minimum Visual Studio 2013).

1. Create a new empty SharePoint project matching the desired SharePoint version (SharePoint 2013, SharePoint 2016, or SharePoint 2019).

2. Give your project the name OpenPDFSharePoint, set its location on your disk, select the desired .NET Framework version, and click Create.

3. Select your development SharePoint site for debugging, and pick Deploy as farm solution. Click Finish. This will create the skeleton of your project.

Creating the Folder Structure

Some folders in your project have to be created or mapped to SharePoint folders in advance.

1. In the Solution Explorer window, right-click the OpenPDFSharePoint project and select Add > SharePoint “Layouts” Mapped Folder. This will create the Layouts folder and a folder for your code (OpenPDFSharePoint) inside. It also automatically updates the package details.

2. Right-click the OpenPDFSharePoint project in the Solution Explorer window again and select Add > SharePoint Mapped Folder. Select {SharePointRoot} > TEMPLATE > XML from the tree structure in the popup dialogue and click OK.

3. Using the context menu again (right-click on the newly created OpenPDFSharePoint folder inside the Layouts folder), select Add > New Folder. Create the following nested subfolders inside the OpenPDFSharePoint folder: assets > modern > pspdfkit-lib.

Adding the PSPDFKit Libraries to the Project

The content (the .wasm file and the JavaScript, CSS, and font files) mentioned in this next part is the PSPDFKit Web Standalone product. It enables the browser to render and edit PDF files.

1. Download the latest PSPDFKit Web Standalone libraries from https://my.nutrient.io/download/web/latest.

2. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.2.2.tar.gz to your computer.

3. Once the download is complete, extract the archive.

4. Right-click on the Layouts > OpenPDFSharePoint > assets > modern folder in the Solution Explorer window and select Add > Existing Item…

5. Navigate to the extracted package > dist > modern > pspdfkit.js file, select it, and click Add.

6. Now, right-click on the Layouts > OpenPDFSharePoint > assets > modern > pspdfkit-lib folder in the Solution Explorer window and select Add > Existing Item… again.

7. Navigate to the extracted package > dist > modern > pspdfkit-lib folder, select all the files in the folder, and click Add. The result will look like this:

Adding a PDF Viewer Page

This SharePoint application page will encapsulate the PSPDFKit Web Standalone component and configure it to display the selected PDF file. It’ll also save the changes back into the SharePoint library.

Right-click the OpenPDFSharePoint folder inside the Layouts folder in the Solution Explorer window and select Add > New Item.

Select Application Page (Farm Solution only) and name it ViewPDF.aspx. Click Add.

In the ViewPDF.aspx file, identify the main content placeholder:

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
</asp:Content>

You have to add three things inside the main content placeholder.

1. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: calc(100vh - 210px);"></div>

2. Add a reference to the PSPDFKit JavaScript file:

<script type="text/javascript" src="assets/modern/pspdfkit.js"></script>

3. Add the following script:

<script type="text/javascript">
	 // !!! Enter your license key here !!!
	 let licenseKey = "paste your license here";

	 // Load PDF Editor
	 PSPDFKit.load({
		  container: "#pspdfkit",
		  document: "<%= fileURL %>",
		  licenseKey: licenseKey
	 })
		  .then(function (instance) {
				console.log("PSPDFKit loaded", instance);
		  })
		  .catch(function (error) {
				console.error(error.message);
		  });
</script>

If you have a PSPDFKit license, then paste it into the script (at the beginning) between the quotation marks. Otherwise, let the licenseKey variable be an empty string.

You must explicitly set the type attribute of the script elements to `"text/javascript"`. Otherwise, they’ll be ignored.

Modify the ViewPDF.aspx.cs code behind the file to include the fileURL public property and some new code in the Page_load event:

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System;

namespace OpenPDFSharePoint.Layouts.OpenPDFSharePoint
{
	 public partial class ViewPDF : LayoutsPageBase
	 {
		  /// <summary>
		  /// Gets the file URL extracted from the URL key.
		  /// </summary>
		  public string fileURL { get; private set; }

		  /// <summary>
		  /// Page load event.
		  /// </summary>
		  protected void Page_Load(object sender, EventArgs e)
		  {
				// Extract the file URL for the SharePoint file.
				fileURL = Request.QueryString["fileURL"];
		  }
	 }
}

Adding a File Handler

A SharePoint file handler can be used to link PDF files to the PSPDFKit PDF editor. The file handlers are simple XML files at a specific location. They instruct SharePoint to redirect to your URL of choice whenever a file with a particular extension is clicked.

Add an .xml file named serverfilesPSPDFKit.xml to the XML folder in the solution with the following content:

<?xml version="1.0" encoding="utf-8" ?>
<ServerFiles>
  <!-- Redirect any links to a PDF file to the PDF Editor application page -->
  <Mapping FileExtension="pdf" RedirectUrlTemplate="/_layouts/15/OpenPDFSharePoint/ViewPDF.aspx?fileURL=|0" NoGetRedirect="TRUE"/>
</ServerFiles>

Enabling the WASM MIME Type

Before the above example can be used, verify that .wasm files are served by your SharePoint web server.

Start the Internet Information Services (IIS) Manager. Navigate to the website that belongs to your SharePoint instance. Double-click MIME Types in the Features View.

If .wasm isn’t in the list of extensions, click the Add button in the Actions pane. In the Add MIME Type popup window, enter ".wasm" (under File name extension:) and "application/wasm" (under MIME type:).

Publishing the Solution

Visual Studio allows you to deploy your solution to the SharePoint instance you selected at the beginning for debugging purposes. Select Build > Deploy Solution.

It’s also possible to publish a deployable package (.wsp) by selecting Build > Publish… Pick Publish to File System, specifying your desired location, and clicking Publish.

Installing the Solution

Open the SharePoint Management Shell with Run as administrator. Assuming you have the .wsp file in the c:\deploy folder, copy and execute the following command:

Add-SPSolution "c:\deploy\OpenPDFSharePoint.wsp"

Next, copy and execute the following command:

Install-SPSolution -Identity OpenPDFSharePoint.wsp -GACDeployment

SharePoint Administration and SharePoint Timer Service must be running.

Using the Solution

Navigate to a SharePoint document library and click on a PDF file. It’ll open in the PSPDFKit PDF editor.

You can now begin customizing the user interface or implementing custom functionality.

Next Steps

• Customizing the user interface

• Customizing annotation behavior

• Custom signature functionality

• Custom redaction automations

Integrate into SharePoint On-Premises as a File Handler

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into SharePoint on-premises environments as a file handler.

File handlers are simple XML files that instruct SharePoint to redirect to your URL of choice whenever a file with a particular extension is clicked. By using a file handler, you’ll override SharePoint’s default behavior so that PDF documents stored in SharePoint are opened directly inside your application. Any edits to the opened files using your application can then be directly saved back to SharePoint.

PSPDFKit for SharePoint is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.

PSPDFKit for SharePoint shares the same APIs as PSPDFKit for Web Standalone, so use the Web documentation when customizing your SharePoint application.

Try Our No-Code App

Requirements

Hardware and operating system requirements are determined by the requirements of the SharePoint version you’re targeting, as well as the requirements of the Visual Studio version used for development. Both SharePoint Server and Visual Studio have to be installed on the developer machine.

The required Visual Studio versions for targeting different SharePoint versions are summarized in the following table. Up to Visual Studio 2017, the matching Microsoft Office Developer Tools needs to be manually downloaded and installed. For Visual Studio 2019 and 2022, the relevant components can be selected during installation of Visual Studio.

SharePoint Permissions Considerations

To develop SharePoint solutions, you must have sufficient permissions to run and debug them. Before you can test a SharePoint solution, take the following steps to ensure you have the necessary permissions:

1. Add your user account as an Administrator on the system.

2. Add your user account as a Farm Administrator for the SharePoint server.

• In SharePoint Central Administration, click the Manage the farm administrators group link.

• On the Farm Administrators page, click the New button.

3. Add your user account to the WSS_ADMIN_WPG group.

You can find more information by clicking the link that corresponds to your version of Visual Studio:

• Visual Studio 2012

• Visual Studio 2013

• Visual Studio 2017

• Visual Studio 2019

• Visual Studio 2022

Adding the PSPDFKit Libraries to the Project

The content (the .wasm file and the JavaScript, CSS, and font files) mentioned in this next part is the PSPDFKit Web Standalone product. It enables the browser to render and edit PDF files.

1. Download the latest PSPDFKit Web Standalone libraries from https://my.nutrient.io/download/web/latest.

2. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.2.2.tar.gz to your computer.

3. Once the download is complete, extract the archive.

4. Right-click on the Layouts > OpenPDFSharePoint > assets > modern folder in the Solution Explorer window and select Add > Existing Item…

5. Navigate to the extracted package > dist > modern > pspdfkit.js file, select it, and click Add.

6. Now, right-click on the Layouts > OpenPDFSharePoint > assets > modern > pspdfkit-lib folder in the Solution Explorer window and select Add > Existing Item… again.

7. Navigate to the extracted package > dist > modern > pspdfkit-lib folder, select all the files in the folder, and click Add. The result will look like this:

Adding a PDF Viewer Page

This SharePoint application page will encapsulate the PSPDFKit Web Standalone component and configure it to display the selected PDF file. It’ll also save the changes back into the SharePoint library.

Right-click the OpenPDFSharePoint folder inside the Layouts folder in the Solution Explorer window and select Add > New Item.

Select Application Page (Farm Solution only) and name it ViewPDF.aspx. Click Add.

In the ViewPDF.aspx file, identify the main content placeholder:

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
</asp:Content>

You have to add three things inside the main content placeholder.

1. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: calc(100vh - 210px);"></div>

2. Add a reference to the PSPDFKit JavaScript file:

<script type="text/javascript" src="assets/modern/pspdfkit.js"></script>

3. Add the following script:

<script type="text/javascript">
	 // !!! Enter your license key here !!!
	 let licenseKey = "paste your license here";

	 // Load PDF Editor
	 PSPDFKit.load({
		  container: "#pspdfkit",
		  document: "<%= fileURL %>",
		  licenseKey: licenseKey
	 })
		  .then(function (instance) {
				console.log("PSPDFKit loaded", instance);
		  })
		  .catch(function (error) {
				console.error(error.message);
		  });
</script>

If you have a PSPDFKit license, then paste it into the script (at the beginning) between the quotation marks. Otherwise, let the licenseKey variable be an empty string.

You must explicitly set the type attribute of the script elements to `"text/javascript"`. Otherwise, they’ll be ignored.

Modify the ViewPDF.aspx.cs code behind the file to include the fileURL public property and some new code in the Page_load event:

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System;

namespace OpenPDFSharePoint.Layouts.OpenPDFSharePoint
{
	 public partial class ViewPDF : LayoutsPageBase
	 {
		  /// <summary>
		  /// Gets the file URL extracted from the URL key.
		  /// </summary>
		  public string fileURL { get; private set; }

		  /// <summary>
		  /// Page load event.
		  /// </summary>
		  protected void Page_Load(object sender, EventArgs e)
		  {
				// Extract the file URL for the SharePoint file.
				fileURL = Request.QueryString["fileURL"];
		  }
	 }
}

Adding a File Handler

A SharePoint file handler can be used to link PDF files to the PSPDFKit PDF editor. The file handlers are simple XML files at a specific location. They instruct SharePoint to redirect to your URL of choice whenever a file with a particular extension is clicked.

Add an .xml file named serverfilesPSPDFKit.xml to the XML folder in the solution with the following content:

<?xml version="1.0" encoding="utf-8" ?>
<ServerFiles>
  <!-- Redirect any links to a PDF file to the PDF Editor application page -->
  <Mapping FileExtension="pdf" RedirectUrlTemplate="/_layouts/15/OpenPDFSharePoint/ViewPDF.aspx?fileURL=|0" NoGetRedirect="TRUE"/>
</ServerFiles>

Enabling the WASM MIME Type

Before the above example can be used, verify that .wasm files are served by your SharePoint web server.

Start the Internet Information Services (IIS) Manager. Navigate to the website that belongs to your SharePoint instance. Double-click MIME Types in the Features View.

If .wasm isn’t in the list of extensions, click the Add button in the Actions pane. In the Add MIME Type popup window, enter ".wasm" (under File name extension:) and "application/wasm" (under MIME type:).

Publishing the Solution

Visual Studio allows you to deploy your solution to the SharePoint instance you selected at the beginning for debugging purposes. Select Build > Deploy Solution.

It’s also possible to publish a deployable package (.wsp) by selecting Build > Publish… Pick Publish to File System, specifying your desired location, and clicking Publish.

Installing the Solution

Open the SharePoint Management Shell with Run as administrator. Assuming you have the .wsp file in the c:\deploy folder, copy and execute the following command:

Add-SPSolution "c:\deploy\OpenPDFSharePoint.wsp"

Next, copy and execute the following command:

Install-SPSolution -Identity OpenPDFSharePoint.wsp -GACDeployment

SharePoint Administration and SharePoint Timer Service must be running.

Using the Solution

Navigate to a SharePoint document library and click on a PDF file. It’ll open in the PSPDFKit PDF editor.

You can now begin customizing the user interface or implementing custom functionality.

Next Steps

• Customizing the user interface

• Customizing annotation behavior

• Custom signature functionality

• Custom redaction automations

Integrate into Microsoft Teams

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into Microsoft Teams as a tab app. By the end of this guide, you’ll be able to use a web browser to directly open PDF documents in a Teams tab, as well as display, edit, and save them back to Teams.

PSPDFKit for Teams is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.

PSPDFKit for Teams shares the same APIs as PSPDFKit for Web Standalone, so use the Web documentation when customizing your Teams application.

Try Our No-Code App

Starting with SharePoint v1.8, Microsoft made it possible to build tab apps using a SharePoint Online web part.

To get started with PSPDFKit for Teams, first follow the instructions for integrating PSPDFKit for SharePoint as a web part.

Once you’ve completed the steps in the guide and the SharePoint web part has been created, add TeamsTab to the supportedHosts property of the web part manifest to use it as a tab in a channel. You’ll find the manifest file under the ./src/webparts/**/**.manifest.json file:

// src/webparts/PSPDFKit/PSPDFKitWebPart.manifest.json
"supportedHosts": ["SharePointWebPart", "TeamsTab"],

The PSPDFKit web part will now appear as a tab app that you can add to a Microsoft Teams channel.

Once the PSPDFKit tab app has been added to a channel, click the PSPDFKit tab and select the Settings option. Then click Select Document to choose a PDF file to open.

You can now begin customizing the user interface or implementing custom functionality.

Next Steps

• Customizing the user interface

• Customizing annotation behavior

• Custom signature functionality

• Custom redaction automations

References

• Building Microsoft Teams Tabs using SharePoint Framework

• Build Microsoft Teams tab using SharePoint Framework - Tutorial

Integrate into Microsoft OneDrive

This guide will walk you through the steps necessary to integrate PSPDFKit for Web into Microsoft OneDrive as a file handler. File handlers instruct OneDrive to redirect to your URL of choice whenever a file with a particular extension is clicked. By using a file handler, you’ll override OneDrive’s default behavior so that PDF documents are opened directly inside your application. Any edits to the opened files using your application can then be directly saved back to OneDrive.

PSPDFKit for OneDrive is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.

PSPDFKit for OneDrive shares the same APIs as PSPDFKit for Web Standalone, so use the Web documentation when customizing your OneDrive application.

Try Our No-Code App

SharePoint Online and OneDrive share the same file handler manifest, which means that implementing the file handler for OneDrive will automatically also implement it for SharePoint. It isn’t possible to selectively implement it for only one of these services. Therefore, to implement the OneDrive file handler, follow the instructions for implementing the SharePoint Online file handler.

After the SharePoint Online file handler has been deployed, PDF documents in the OneDrive document library will open by default in your PDF editor, where they can be edited and saved.

You can now begin customizing the user interface or implementing custom functionality.

Next Steps

• Customizing the user interface

• Customizing annotation behavior

• Custom signature functionality

• Custom redaction automations

Integrate into Salesforce as a Lightning Web Component

PSPDFKit for Salesforce enables you to open PDF, JPG, PNG, and TIFF files inside Salesforce. This unlocks the full functionality of PSPDFKit in Salesforce, enabling you to generate, redact, and sign PDFs, among other features.

This guide explains how to integrate PSPDFKit into Salesforce. The integration works as a Lightning web component (LWC) that you can add to any Salesforce organization.

Requirements

Before continuing with this guide, perform all of the following actions:

• Set up a Salesforce Developer Edition account.

• Install the Salesforce CLI.

• Install the latest stable version of Node.js.

• Install a package manager compatible with npm. This guide contains usage examples for the npm client, which is installed with Node.js by default.

Deploying the Package

To deploy the PSPDFKit package to your Salesforce organization, follow these steps.

1. Download the PSPDFKit for Salesforce project from GitHub, and then unpack the ZIP file.

Alternatively, run the following terminal command to clone the PSPDFKit for Salesforce repository from GitHub:

git clone https://github.com/PSPDFKit/salesforce.git

2. In the terminal, go to the PSPDFKit for Salesforce project folder and run the following command to update the PSPDFKit version used by the integration:

npm install

yarn install

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

Enabling Users to Use PSPDFKit

To enable users of your Salesforce organization to use PSPDFKit, follow these steps.

1. In Salesforce, go to Users > Permission Sets.

2. Find PSPDFKit Admin Access in the list and click it.

3. Click Manage Assignments.

4. Click Add Assignment.

5. Select the users you want to authorize to use PSPDFKit.

6. Click Next, and then click Assign.

Changing the Security Settings

PSPDFKit for Salesforce requires Lightning Locker to protect Lightning web components, but Salesforce uses Lightning Web Security by default. To change the default security settings, follow these steps.

1. In Salesforce, go to Security > Session Settings.

2. Deselect Use Lightning Web Security for Lightning web components.

3. Scroll down and click Save.

Using the PSPDFKit for Salesforce Integration

To use PSPDFKit in your Salesforce organization, 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.

Next Steps

• Open documents from Salesforce

• Save files back to Salesforce

Integrate into Salesforce as a Lightning Web Component

PSPDFKit for Salesforce enables you to open PDF, JPG, PNG, and TIFF files inside Salesforce. This unlocks the full functionality of PSPDFKit in Salesforce, enabling you to generate, redact, and sign PDFs, among other features.

This guide explains how to integrate PSPDFKit into Salesforce. The integration works as a Lightning web component (LWC) that you can add to any Salesforce organization.

Requirements

Before continuing with this guide, perform all of the following actions:

• Set up a Salesforce Developer Edition account.

• Install the Salesforce CLI.

• Install the latest stable version of Node.js.

• Install a package manager compatible with npm. This guide contains usage examples for the npm client, which is installed with Node.js by default.

Adding PSPDFKit for Salesforce

To add PSPDFKit for Salesforce to your Salesforce project, follow these steps.

1. Download the PSPDFKit for Salesforce project from GitHub, and then unpack the ZIP file.

Alternatively, run the following terminal command to clone the PSPDFKit for Salesforce repository from GitHub:

git clone https://github.com/PSPDFKit/salesforce.git

2. Copy the files from the force.app/main/default folder of the PSPDFKit for Salesforce project to the same folder of your Salesforce application.

3. If your application’s root folder doesn’t have a manifest folder, copy this folder from the PSPDFKit for Salesforce project.

4. In the terminal, go to your application’s root folder and look for the package.json file.

   • If you see a package.json file, continue to the next step.

   • If you don’t see a package.json file, run the following command:

npm init -y

5. On the Visualforce page where you want to use PSPDFKit for Salesforce, add the following script tag:

<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@/pspdfkit.js" type="text/javascript"></script>

6. Copy the scripts/pspdfkit/update-pspdfkit-version.js file of the PSPDFKit for Salesforce project to the root folder of your Salesforce application.

7. Run the script:

node ./update-pspdfkit-version.js

Adding the File Selector

It’s recommended that you add the file selector to your project. To do so, copy the files and folders from the force-app/main/default folder of the PSPDFKit for Salesforce project to the same folder of your Salesforce application. This enables you to open files from Salesforce and save them back, both using the built-in user interface (UI) and programmatically. If you don’t complete this step, you can only load files programmatically from an external URL, and you cannot save them to Salesforce.

Deploying the Package

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

1. 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

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

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

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

Enabling Users to Use PSPDFKit

To enable users of your Salesforce organization to use PSPDFKit, follow these steps.

1. In Salesforce, go to Users > Permission Sets.

2. Find PSPDFKit Admin Access in the list and click it.

3. Click Manage Assignments.

4. Click Add Assignment.

5. Select the users you want to authorize to use PSPDFKit.

6. Click Next, and then click Assign.

Changing the Security Settings

PSPDFKit for Salesforce requires Lightning Locker to protect Lightning web components, but Salesforce uses Lightning Web Security by default. To change the default security settings, follow these steps.

1. In Salesforce, go to Security > Session Settings.

2. Deselect Use Lightning Web Security for Lightning web components.

3. Scroll down and click Save.

Using the PSPDFKit for Salesforce Integration

To use PSPDFKit in your Salesforce organization, 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.

Next Steps

• Open documents from Salesforce

• Save files back to Salesforce