Some test text!
This guide will help you integrate a free trial of WebViewer into a jQuery applications from scratch. It will help you clone the jQuery sample repository, walk through the project structure, and show you how to call other WebViewer API. Your free trial includes unlimited trial usage and support from solution engineers.
Clone the jQuery sample by executing
git clone https://github.com/PDFTron/webviewer-jquery-sample.git
Once cloned, navigate into the webviewer-jquery-sample
directory and install all the required dependencies by executing
npm install
npm will also download the PDFTron WebViewer and extract it to /src/lib
.
You are now ready to run the sample or use more WebViewer APIs.
After initial setup, the webviewer-jquery-sample
directory should be laid out like this:
webviewer-jqeury-sample
├── CONTRIBUTING.md
├── LICENSE
├── node_modules
│ └── ...
├── package.json
├── README.md
├── app
│ ├── index.html
| ├── app.js
│ ├── lib
│ │ ├── ui
│ │ │ ├── ...
│ │ ├── core
│ │ │ ├── ...
│ │ └── webviewer.min.js
│ └── ...
└── ...
Notable files and directories include:
File/Folder Name | Description |
---|---|
LICENSE | Lists the PDFTron copyright and license information. |
files | Contains the sample PDF for the application |
lib | Contains the extracted WebViewer SDK |
index.html | Contains the main layout for the application |
app.js | Contains the code for the main application, includes WebViewer instantiation as well as the 'documentLoaded' callback |
In short, app.js
instantiates WebViewer and sets up some example event handlers. WebViewer is presented on the page.
To run the sample, navigate to your webviewer-jquery-sample/
directory and execute
npm start
Then navigate to http://localhost:3000
. You should see the application load on your browser.
To call more WebViewer API's, navigate to /src/app/app.js
and add the API calls in the callback of the WebViewer constructor (you may need to make one if it is not provided).
WebViewer({
path: '../lib',
initialDoc: '../files/webviewer-demo-annotated.pdf'
}, document.getElementById('viewer'))
.then(instance => {
// In this callback WebViewer will be initialized, so you can call WebViewer API here.
instance.setTheme('light');
});
If your jQuery application is already running, you should see the theme change by refreshing the page. Otherwise execute npm start
again, then navigate to http://localhost:3000
and you should see that the theme has changed.
Get the answers you need: Support
Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.
Select a platform to get started with your free trial.
Web
Android
iOS
Windows
Linux
Unlimited usage. No email address required.