Some test text!

Loading...
Guides
SharePoint

Integrating WebViewer JavaScript PDF library with SharePoint Online

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.

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:

)

  • Set up on Windows environment highly recommended

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

)

)

)

No trial license key required.
The trial of PDFTron SDK works without a license key. A commercial license key is required for use in a production environment. Please fill out our licensing form if you do not have a valid license key.
Keep your commercial license key confidential.
License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).

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.

NodeJS version

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

pdftron folder on SharePoint tenant

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

Lib folder from WebViewer downloadLib folder on SharePoint tenant

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

    git clone https://github.com/PDFTron/pdftron-sharepoint-web-part
  2. Use npm to install gulp and yeoman

    npm i -g yo@3.1.0 gulp@3.9.1
  3. Use npm to install the Microsoft SharePoint Generator

    npm i @microsoft/generator-sharepoint@1.12.1 -g
  4. 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
  5. 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.

Local SharePoint

Local SharePoint with drop down

Local SharePoint with web part

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

Live workbench SharePoint with web part

  1. Once you are ready to deploy the application you will need to enable the Microsoft 365 CDN.

  2. Create an App Catalog site collection if you haven't done so yet (Step 1 is sufficient).

  3. Bundle your solution with the following command.

    gulp bundle --ship
  4. 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
  5. 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.

SharePoint admin panelSharePoint app catalog indexSharePoint app catalog

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

SharePoint add app button

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

SharePoint add live WebViewerSharePoint live WebViewer

Next step

Guides Samples API docs

For more information on how to call WebViewer API, check out this blog.

Get the answers you need: Support

UPCOMING WEBINAR: Live tech update and run-through. October 21 @ 11am PDT