Frameworks
Integrations
Mendix
SharePoint
Default UI
Modular UI
AnnotationManager
Annotation Types
Customize
Version 11
v11.0
Version 10
v10.12
v10.11
v10.10
v10.9
v10.8
v10.7
v10.6
v10.5
v10.4
v10.3
v10.2
v10.1
v10.0
Version 8
v8.12
v8.11
v8.10
v8.9
v8.8
v8.7
v8.6
v8.5
v8.4
v8.3
v8.2
v8.1
v8.0
Version 7
Version 6
v6.3
v6.2
v6.1
v6.0
Version 5
Version 4
Version 3
Version 2
WebViewer Server
WebViewer BIM
The full API is a complete browser side PDF SDK, unlocking viewing, parsing and editing of PDF files. This guide will demonstrate how to set up a basic full API project that outputs the number of pages in a PDF document.
The full API does not require any conversion of documents but can only view PDF documents.
This guide will require the following files:
Open up index.html with a text editor and copy/paste the following code into the HTML document.
Here we include the required WebViewer file and start out with a single "viewer" div that we will add content to using a script.
In our custom script index.js
, the WebViewer
function is called to create a new WebViewer instance that will be added as a child to our "viewer" div.
Overview of WebViewer initialization parameters:
path
- String representing the URL that points to the WebViewer libraries.initialDoc
- String representing the URL of the document that will be loaded in WebViewer.showLocalFilePicker
- Boolean that determines whether we can open local documents in the viewer.fullAPI
- If true, allows the Full API to be used and PDFNet
will be available on the instance.licenseKey
- String containing the license key (you do not need to set this property if you are just trialing)If you open index.html from a server, you should be able to see your document displayed in WebViewer.
Now that we have our pdf displayed, let's use the full API to manipulate the document.
In order to run this on browsers without ES7 support, you can convert the file to ES5 using ES7-to-ES5 transformers such as Babel.
If you run the project again in a server, you should be able to see "Hello WebViewer" pop up in an alert box once WebViewer has loaded. Before the custom code is run however, several checks and initializations need to be done first.
PDFNet.initialize()
- Initializes Full API backend. This should be called before any Full API functions are called.doc.getPDFDoc()
- Extracts the PDFNet PDFDoc object from the WebViewer document.pdfDoc.requirePage()
- Ensures that a particular page of the pdf document is finished downloading before we read or write from it.requirePage()
can be called instead in the middle of the custom code, but only by unlocking and relocking all operations.Let us change our main()
code to do something more interesting:
This code sample adds the "butterfly.png" image to location (x:100, y:600) relative to the lower left corner of the document's first page.
Once our custom code has finished running, two final functions docViewer.refreshAll()
and docViewer.updateView()
are called to refresh and update the WebViewer display.
The resulting viewer should look like this:
This guide and all other Full API guides use ES7 async/await functions in JavaScript which are currently supported in Chrome, Firefox, Edge, Safari, and Opera but may be unsupported in other browsers. If you are working with a browser without async/await support, you will have to transpile the code from ES7 to ES5 using something like Babel.
The best way to get started with writing your own full API code is to run the full API samples. You can find working samples and their source code on the Full API samples page.
Did you find this helpful?
Trial setup questions?
Ask experts on DiscordNeed other help?
Contact SupportPricing or product questions?
Contact Sales