Skip to content

Commit 97c9cf1

Browse files
ritz078ritz078
committed
Add vanilla JS example for PSPDFKit integration
- Created a new vanilla JavaScript example project demonstrating the integration of PSPDFKit for Web. - Added essential files including index.html, package.json, README.md, and .gitignore. - Implemented a basic HTML structure with a PDF viewer using PSPDFKit. - Included a sample PDF file for demonstration purposes. - Configured package.json with necessary dependencies and scripts for running the example. - Updated e2e test script to exclude the new vanilla example directory.
1 parent f3a78ae commit 97c9cf1

File tree

7 files changed

+1711
-1
lines changed

7 files changed

+1711
-1
lines changed

‎examples/vanilla/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
pspdfkit.js
2+
pspdfkit.lib
3+
node_modules

‎examples/vanilla/README.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
## Overview
2+
3+
This is an internal vanilla JS example that integrates the Nutrient Web SDK in a very thin wrapper for testing purposes. It can be useful when it's required to rule out possible interference by other wrapping frameworks, like the Web catalog.
4+
5+
This example is not public.
6+
7+
## Usage
8+
9+
With a Nutrient Web SDK published version:
10+
11+
```bash
12+
# Install dependencies, including Nutrient Web SDK
13+
npm install
14+
# Run the example
15+
npm start
16+
```
17+
18+
With the last locally built Nutrient Web SDK version:
19+
20+
```bash
21+
# Locally build Web SDK
22+
(cd ../../ && yarn build)
23+
# Delete the current version installed in the example, if any
24+
rm -rf node_modules/pspdfkit/dist
25+
# Create package folder
26+
mkdir -p node_modules/pspdfkit/dist
27+
# Copy the last local build to the example node_modules folder
28+
cp -R ../../dist/production/. node_modules/pspdfkit/dist
29+
# Run the example
30+
npm start
31+
```
32+
33+
With the development build (no hot reloading, manual reloading is needed if the sources are modified):
34+
35+
```bash
36+
# Run development build of Web SDK
37+
(cd ../../ && yarn start)
38+
# Run the example
39+
npm start
40+
```
41+
42+
The example can be accessed at [http://localhost:4111](http://localhost:4111).

‎examples/vanilla/example.pdf‎

64 KB
Binary file not shown.

‎examples/vanilla/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
8+
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
11+
<meta name="description" content="" />
12+
13+
<meta name="author" content="" />
14+
15+
<title>Vanilla</title>
16+
17+
<style>
18+
* {
19+
margin: 0;
20+
padding: 0;
21+
}
22+
#container {
23+
height: 100vh;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<div id="container"></div>
30+
31+
<!-- Uncomment to use production build -->
32+
<!-- <script src="node_modules/pspdfkit/dist/pspdfkit.js"></script> -->
33+
<!-- Uncomment to use development build -->
34+
<script src="http://localhost:8080/pspdfkit.js"></script>
35+
36+
<script type="application/javascript">
37+
PSPDFKit.load({
38+
container: "#container",
39+
document: "example.pdf",
40+
}).catch(function (err) {
41+
console.error(err);
42+
43+
instance.getFormFields().then(async function (formFields) {
44+
console.log("All form fields", formFields.toJS());
45+
const updatedFormFields = formFields.map((ff) => {
46+
if (ff.constructor.name === "TextFormField") {
47+
return ff.set("readOnly", true);
48+
}
49+
50+
return ff;
51+
});
52+
53+
await instance.update(updatedFormFields);
54+
});
55+
});
56+
</script>
57+
</body>
58+
</html>

0 commit comments

Comments
 (0)