Welcome to PDFTron. This guide will help you integrate a free trial of WebViewer into SharePoint Online as a web part. It will help you clone the SharePoint sample repository and show you how to integrate WebViewer as a web part. Your free trial includes unlimited trial usage and support from solution engineers.

Get the SharePoint sample source code here

Prerequisites

• Node v10.13.0 and NPM

  • IMPORTANT: For the SharePoint web part tools to work you must use a node version higher than v10.13.x and less than v11.x.x
• WebViewer:

Download WebViewer

• (Optional but recommended) Node Version Manager
• Set up on Windows environment highly recommended

For step-by-step help on setting up a SharePoint development environment, see one of the following:

• SharePoint DX Setup Guide
• Set up your Microsoft 365 Tenant
• Set up your SharePoint Framework Development Environment

Initial Setup

1. Ensure that you are running a Node.js version higher than v10.13.0 and lower than v11.0.0. You can check this by running node -v in a console.

2. Ensure that custom scripts are enabled on your tenant. If you have SharePoint Online Management Shell installed you can run this command to enable custom scripts on your tenant.

   Set-SPOsite <SiteURL> -DenyAddAndCustomizePages 0

3. Map a network drive to your SharePoint Master Page Gallery. You should be able to map a network drive directly to the URL {your-domain}.sharepoint.com/_catalogs/masterpage/. After you've done this create a new folder called pdftron as shown below.

4. Within the extracted WebViewer folder copy over the entire lib folder into SharePoint in the newly created pdftron folder.

5. Next clone the webviewer-sharepoint sample from github.

   git clone https://github.com/PDFTron/pdftron-sharepoint-web-part

6. Use npm to install gulp and yeoman

   npm i -g yo@3.1.0 gulp@3.9.1

7. Use npm to install the Microsoft SharePoint Generator

   npm i @microsoft/generator-sharepoint@1.12.1 -g

8. Run the initialization script. It may take some time to download all of the necessary files and complete the configuration process but after this is down you should see a locally run instance of SharePoint.

   npm run generate-sharepoint-webviewer-sample

9. After your local SharePoint instance is running you should be able to see a blank SharePoint canvas like in the screenshot below. You can add a PDFTron WebViewer web part by adding a new web part to the page and selecting the PDFTron Sample web part.

10. With your server running you can access the PDFTron web part sample with your SharePoint documents loaded into the WebViewer at {your-domain}.sharepoint.com/_layouts/15/workbench.aspx.

11. Once you are ready to deploy the application you will need to enable the Microsoft 365 CDN.
12. Create an App Catalog site collection if you haven't done so yet (Step 1 is sufficient).

13. Bundle your solution with the following command.

    gulp bundle --ship

14. Generate the production sppkg file with the following command. This should generate a pdftron-webpart-sample.sppkg file in the sharepoint\solution\ folder.

    gulp package-solution --ship

15. Go to your App Catalog for SharePoint. You can find this by going to your admin portal at {your-domain}-admin.sharepoint.com/. Click on the More Features button in the left panel then selecting App Catalog on the next page. From here you should be able to see Apps for SharePoint on the left panel.

16. Select the New button and when prompted upload the pdftron-webpart-sample pdftron-webpart-sample.sppkg to install the app on the site. Trust the app, the client-side solution and the web part are installed on your developer site.

17. You can now create use the PDFTron WebViewer samples on your live SharePoint pages.

Next step

Guides Samples API docs