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

Commit 6b7a3c4

Browse files
justinjung04justinjung04
committed
Added scripts to download and add license key
1 parent 35cc9ff commit 6b7a3c4

File tree

11 files changed

+96
-24
lines changed

11 files changed

+96
-24
lines changed

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
22

3+
# WebViewer
4+
public/lib
5+
public/license-key.js
6+
37
# dependencies
48
/node_modules
59
/.pnp

‎README.md‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,33 @@
22

33
[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.
44

5-
![WebViewer UI](./public/assets/img/webviewer-ui.png)
5+
![WebViewer UI](https://www.pdftron.com/downloads/pl/webviewer-ui.png)
66

77
This repo is specifically designed for any users interested in integrating WebViewer into React project. This project was generated with [Create React App](https://github.com/facebook/create-react-app). See [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started) for more information.
88

99
## Initial setup
1010

1111
Before you begin, make sure your development environment includes [Node.js](https://nodejs.org/en/).
1212

13-
To work with this repo, you must [download the latest WebViewer](https://www.pdftron.com/documentation/web/guides/run-samples). Then, copy the files from `WebViewer/lib` folder and paste them to this project's `public/assets/webviewer` folder.
14-
1513
## Install
1614

17-
Run `npm install`.
15+
```
16+
git clone https://github.com/PDFTron/webviewer-react-sample.git
17+
cd webviewer-react-sample
18+
npm install
19+
```
1820

1921
## Run
2022

21-
Run `npm start` for a dev server. Navigate to `http://localhost:3000/`. The app will automatically reload if you change any of the source files.
23+
```
24+
npm start
25+
```
2226

2327
## Build
2428

2529
Run `npm run build` to build the project. The build artifacts will be stored in the `build/` directory. See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
2630

27-
## API documentation
31+
## WebViewer APIs
2832

2933
See [API documentation](https://www.pdftron.com/documentation/web/guides/ui/apis).
3034

‎package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,19 @@
77
"react-dom": "^16.6.0",
88
"react-scripts": "2.1.1"
99
},
10+
"devDependencies": {
11+
"btoa": "^1.2.1",
12+
"download": "^7.1.0",
13+
"fs-extra": "^7.0.1"
14+
},
1015
"scripts": {
1116
"start": "react-scripts start",
1217
"build": "react-scripts build",
1318
"test": "react-scripts test",
14-
"eject": "react-scripts eject"
19+
"eject": "react-scripts eject",
20+
"postinstall": "npm run download-webviewer && npm run add-license",
21+
"download-webviewer": "node scripts/download-webviewer.js",
22+
"add-license": "node scripts/add-license.js"
1523
},
1624
"eslintConfig": {
1725
"extends": "react-app"

‎public/assets/img/webviewer-ui.png‎

-359 KB
Binary file not shown.

‎public/assets/webviewer/license-key.js‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎public/assets/webviewer/webviewer.min.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎public/assets/files/webviewer-demo-annotated.pdf‎ renamed to ‎public/files/webviewer-demo-annotated.pdf‎

File renamed without changes.

‎public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
Learn how to configure a non-root public URL by running `npm run build`.
2121
-->
2222
<title>React Sample</title>
23-
<script src="%PUBLIC_URL%/assets/webviewer/webviewer.min.js"></script>
24-
<script src="%PUBLIC_URL%/assets/webviewer/license-key.js"></script>
23+
<script src="%PUBLIC_URL%/license-key.js"></script>
24+
<script src="%PUBLIC_URL%/lib/webviewer.min.js"></script>
2525
</head>
2626
<body>
2727
<noscript>

‎scripts/add-license.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const fs = require('fs-extra');
2+
const readline = require('readline');
3+
const btoa = require('btoa');
4+
5+
const RESET = '\x1b[0m';
6+
const UNDERLINE = '\x1b[4m';
7+
const CYAN = '\x1b[36m';
8+
9+
const rl = readline.createInterface({
10+
input: process.stdin,
11+
output: process.stdout
12+
});
13+
14+
rl.question(`\vVisit ${CYAN}${UNDERLINE}https://www.pdftron.com/key-npm${RESET} to get your license key.\nLicense key: `, answer => {
15+
if (!answer) {
16+
rl.write(`\nLicense key not entered. Please visit the following url to get one:\n${CYAN}${UNDERLINE}https://www.pdftron.com/key-npm${RESET}\n\nThen add it by running:\n> npm run add-license\n\n\n`);
17+
rl.close();
18+
process.exit();
19+
}
20+
21+
rl.write(`\nLicense added successfully. To change the license later, run\n> npm run add-license\n\n\n`);
22+
23+
// Using btoa(https://www.w3schools.com/jsref/met_win_btoa.asp) to obsfucate the license key.
24+
// You are welcome to use other ways if you like.
25+
fs.writeFileSync('public/license-key.js', `window.licenseKey = '${btoa(answer)}';`);
26+
27+
rl.close();
28+
});

‎scripts/download-webviewer.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
const download = require('download');
2+
const decompress = require('decompress');
3+
const fs = require('fs-extra');
4+
5+
let downloadedSize = 0;
6+
7+
process.stdout.write('\n');
8+
9+
download(`https://www.pdftron.com/downloads/WebViewer.zip`, '.')
10+
.on('data', data => {
11+
process.stdout.clearLine();
12+
process.stdout.cursorTo(0);
13+
downloadedSize += data.length;
14+
process.stdout.write(`Downloading WebViewer... ${(downloadedSize / 100000000 * 100).toFixed(1)}%`);
15+
})
16+
.then(() => {
17+
process.stdout.clearLine();
18+
process.stdout.cursorTo(0);
19+
process.stdout.write(`Downloading WebViewer... 100%\nDownload completed.\n\nExtracting WebViewer... `);
20+
fs.removeSync('public/lib')
21+
decompress('WebViewer.zip', 'public').then(() => {
22+
// Trim down office, pdf and ui-legacy
23+
// It's highly recommended to use XOD for cordova apps for highest performance
24+
fs.moveSync('public/WebViewer/lib', 'public/lib');
25+
fs.removeSync('public/WebViewer');
26+
fs.removeSync('public/lib/core/pdf/full');
27+
fs.removeSync('public/lib/ui-legacy');
28+
fs.removeSync('public/lib/package.json');
29+
fs.removeSync('public/lib/webviewer.js');
30+
fs.moveSync('public/lib/ui/build', 'public/lib/temp');
31+
fs.removeSync('public/lib/ui');
32+
fs.moveSync('public/lib/temp', 'public/lib/ui/build');
33+
fs.removeSync('WebViewer.zip');
34+
process.stdout.clearLine();
35+
process.stdout.cursorTo(0);
36+
process.stdout.write(`Extracting WebViewer... 100%\nExtract completed.\n\n\n`);
37+
}).catch((err) => {
38+
console.log(err);
39+
});
40+
});

0 commit comments

Comments
 (0)