Skip to content
This repository was archived by the owner on Feb 19, 2025. It is now read-only.

Commit 8bb027e

Browse files
skulshrestha-pdftronskulshrestha-pdftron
committed
first commit
0 parents  commit 8bb027e

File tree

12 files changed

+39677
-0
lines changed

12 files changed

+39677
-0
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
package-lock.json
3+
public/lib/

‎LICENSE

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
Copyright 2019 PDFTron Systems Inc. All rights reserved.
2+
WebViewer React UI project/codebase or any derived works is only permitted in solutions with an active commercial PDFTron WebViewer license. For exact licensing terms please refer to your commercial WebViewer license. For use in other scenario, please contact [email protected]

‎README.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# WebViewer - TypeScript sample
2+
3+
[WebViewer](https://www.pdftron.com/webviewer) is a powerful JavaScript-based PDF Library that's part of the [PDFTron PDF SDK](https://www.pdftron.com). It provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate and manipulate PDFs that can be embedded into any web project.
4+
5+
![WebViewer UI](https://www.pdftron.com/downloads/pl/webviewer-ui.png)
6+
7+
This repo is specifically designed for any users interested in integrating WebViewer into a TypeScript project. WebViewer has a comprehensive definition file ready for use by just adding a reference to the definition file.
8+
9+
## Initial setup
10+
11+
Before you begin, make sure your development environment includes [Node.js](https://nodejs.org/en/).
12+
13+
## Install
14+
15+
```shell
16+
git clone https://github.com/PDFTron/webviewer-typescript-sample.git
17+
cd webviewer-typescript-sample
18+
npm install
19+
```
20+
21+
## Run
22+
23+
```shell
24+
npm start
25+
```
26+
27+
## WebViewer APIs
28+
29+
Most classes and functions are well documented in the TypeScript definition file. See [API documentation](https://www.pdftron.com/documentation/web/guides/ui/apis).
30+
31+
## Enabling full API
32+
33+
PDFNetJS Full is a complete browser side PDF SDK, unlocking viewing, parsing and editing of PDF files. To enable full API, you can modify constructor in `src/index.ts` and then use `tsc src/index.ts` from the project root:
34+
35+
```diff
36+
const viewerElement = document.getElementById('viewer');
37+
WebViewer({
38+
path: 'WebViewer/lib',
39+
initialDoc: 'path/to/local/file OR online URL', // replace with your own PDF file
40+
+ fullAPI: true
41+
}, viewerElement).then((instance) => {
42+
// call APIs here
43+
})
44+
}
45+
```
46+
47+
## License
48+
49+
See [license](./LICENSE).

‎package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "webviewer-typescript-sample",
3+
"version": "1.0.0",
4+
"private": true,
5+
"dependencies": {
6+
"typescript": "^2.1.6"
7+
},
8+
"devDependencies": {
9+
"@pdftron/webviewer-downloader": "^1.0.7",
10+
"btoa": "^1.2.1",
11+
"download": "^7.1.0",
12+
"express": "^4.17.1",
13+
"fs-extra": "^7.0.1",
14+
"ip": "^1.1.5",
15+
"opn": "^6.0.0",
16+
"typescript": "^2.1.6"
17+
},
18+
"scripts": {
19+
"watch": "tsc --watch",
20+
"postinstall": "npm run download-webviewer",
21+
"download-webviewer": "npx @pdftron/webviewer-downloader"
22+
},
23+
"browserslist": [
24+
">0.2%",
25+
"not dead",
26+
"not ie <= 11",
27+
"not op_mini all"
28+
]
29+
}

‎public/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>TypeScript Sample</title>
5+
<link rel="stylesheet" type="text/css" href="../src/index.css"/>
6+
</head>
7+
8+
<!-- Import WebViewer as a script tag -->
9+
<script src="./lib/webviewer.min.js"></script>
10+
<body>
11+
<noscript>
12+
You need to enable JavaScript to run this app.
13+
</noscript>
14+
<div class="header">TypeScript Sample</div>
15+
<div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>
16+
17+
<script src="../src/index.js"></script>
18+
</body>
19+
</html>

‎sample-img.png

252 KB
Loading

‎server.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const express = require('express');
2+
const opn = require('opn');
3+
const ip = require('ip');
4+
5+
const app = express();
6+
7+
const options = process.argv.reduce((acc, arg) => {
8+
const pair = arg.split('=');
9+
if (pair.length === 2) {
10+
acc[pair[0]] = pair[1];
11+
}
12+
return acc;
13+
}, {});
14+
15+
app.get('/ip', (req, res) => {
16+
res.send(ip.address());
17+
});
18+
19+
app.get(/\/myApp(.*)(\/|\.html)$/, (req, res, next) => {
20+
if (req.query.key || !options.key) {
21+
next();
22+
} else {
23+
if (req.originalUrl.slice(-10) === 'index.html') {
24+
res.redirect(`${req.originalUrl}?key=${options.key}`)
25+
} else {
26+
res.redirect(`./index.html?key=${options.key}`)
27+
}
28+
}
29+
});
30+
31+
app.use(express.static('public'));
32+
app.use('/public', express.static('public'));
33+
app.use('/src', express.static('src'));
34+
app.use('/dist', express.static('dist'));
35+
36+
app.listen(3000, '0.0.0.0', (err) => {
37+
if (err) {
38+
console.error(err);
39+
} else {
40+
console.info(`Listening at localhost:3000 (http://${ip.address()}:3000)`);
41+
opn(`http://localhost:3000/`);
42+
}
43+
});

‎src/index.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
html, body {
2+
width: 100%;
3+
height: 100%;
4+
margin: 0;
5+
padding: 0;
6+
font-family: Arial, Helvetica, sans-serif;
7+
}
8+
9+
.header {
10+
width: 100%;
11+
height: 60px;
12+
padding: 8px 8px 8px 16px;
13+
box-sizing: border-box;
14+
background: #00a5e4;
15+
font-size: 1.2em;
16+
line-height: 44px;
17+
color: white;
18+
}
19+
20+
#viewer {
21+
width: 100%;
22+
height: 100%;
23+
}

‎src/index.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/// <reference path="../webviewer.d.ts" />
2+
WebViewer({
3+
path: '../public/lib',
4+
licenseKey: 'Insert commercial license key here after purchase',
5+
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf'
6+
}, document.getElementById('viewer'))
7+
.then(function (instance) {
8+
var docViewer = instance.docViewer;
9+
var annotManager = instance.annotManager;
10+
// call methods from instance, docViewer and annotManager as needed
11+
// you can also access major namespaces from the instance as follows:
12+
var Tools = instance.Tools;
13+
var Annotations = instance.Annotations;
14+
});

‎src/index.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/// <reference path="../webviewer.d.ts" />
2+
3+
WebViewer({
4+
path: '../public/lib', // path to the PDFTron 'lib' folder on your server
5+
licenseKey: 'Insert commercial license key here after purchase',
6+
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
7+
}, document.getElementById('viewer'))
8+
.then(function(instance) {
9+
var docViewer = instance.docViewer;
10+
var annotManager = instance.annotManager;
11+
// call methods from instance, docViewer and annotManager as needed
12+
13+
// you can also access major namespaces from the instance as follows:
14+
var Tools = instance.Tools;
15+
var Annotations = instance.Annotations;
16+
});
17+
18+
19+

‎tsconfig.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"module": "system",
4+
"noImplicitAny": true,
5+
"preserveConstEnums": true
6+
},
7+
"include": [
8+
"src/**/*"
9+
],
10+
"exclude": [
11+
"node_modules"
12+
]
13+
}

0 commit comments

Comments
 (0)