Skip to content

Commit d4c0710

Browse files
c-liutianc-liutian
committed
ComPDFKit Web Example for Vanilla JavaScript
0 parents  commit d4c0710

File tree

7 files changed

+168
-0
lines changed

7 files changed

+168
-0
lines changed

‎.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
.DS_Store
11+
node_modules
12+
webviewer
13+
webviewer.global.js
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎LICENSE

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Copyright (C) 2014-2024 PDF Technologies, Inc. All Rights Reserved.
2+
No part of this document can be reproduced, transferred, distributed or stored in any
3+
format without the prior written permission of PDF Technologies.

‎README.md

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
[ComPDFKit PDF SDK](https://www.compdf.com) seamlessly operates on [Web](https://www.compdf.com/web), [Windows](https://www.compdf.com/windows), [Android](https://www.compdf.com/android), [iOS](https://www.compdf.com/ios), [Mac](https://www.compdf.com/contact-sales), and [Server](https://www.compdf.com/server), with support for cross-platform frameworks such as [React Native](https://www.compdf.com/react-native), [Flutter](https://www.compdf.com/flutter), etc.
2+
3+
4+
5+
## Introduction
6+
[ComPDFKit Web SDK](https://www.compdf.com/web) is a powerful JavaScript-based PDF Library with a slick out-of-the-box responsive UI, which is ideal for developers looking to enhance web apps with powerful PDF features. It enables you to develop a Webviewer in multiple frameworks, including [Vanilla JavaScript](https://www.compdf.com/guides/pdf-sdk/web/make-a-program#integrate-into-a-vanilla-javascript-project), [Vue.js](https://www.compdf.com/guides/pdf-sdk/web/frameworks/vue), [React](https://www.compdf.com/guides/pdf-sdk/web/frameworks/react), [Angular](https://www.compdf.com/guides/pdf-sdk/web/frameworks/angular), [Next.js,](https://www.compdf.com/guides/pdf-sdk/web/frameworks/nextjs) [Nuxt.js](https://www.compdf.com/guides/pdf-sdk/web/frameworks/nuxtjs), [Svelte](https://www.compdf.com/guides/pdf-sdk/web/frameworks/svelte), etc.
7+
8+
Let's start to download and [integrate ComPDFKit Web SDK into a Vanilla JavaScript project](https://www.compdf.com/blog/integrate-compdfkit-web-sdk-in-vanilla-javascript-app), and freely embed specific PDF functionality afterwards.
9+
10+
11+
12+
## Related
13+
14+
- Download [ComPDFKit for Web](https://www.npmjs.com/package/@compdfkit_pdf_sdk/webviewer) in npm.
15+
- Go to [ComPDFKit's Web Demo](https://www.compdf.com/webviewer/demo) to experience how our WebViewer performs.
16+
- Integrate ComPDFKit Web SDK into [Salesforce](https://www.compdf.com/pdf-sdk/salesforce), [SharePoint](https://www.compdf.com/pdf-sdk/sharepoint), [Microsoft Teams](https://www.compdf.com/contact-sales), etc.
17+
18+
- [How to Build a PDF Viewer with JavaScript](https://www.compdf.com/blog/build-a-pdf-viewer-with-javascript)
19+
20+
- [ComPDFKit Standalone Deployment for Web](https://www.compdf.com/blog/compdfkit-standalone-deployment-for-web)
21+
22+
- Recognize and extract data from PDFs with our online [Extract Demo](https://www.compdf.com/pdf-extract/demo)
23+
24+
25+
26+
## Prerequisites
27+
28+
To get started, you'll need:
29+
30+
- The latest stable version of Node.js.
31+
- A package manager compatible with npm.
32+
- License Key: Get a [free 30-day license](https://www.compdf.com/pricing) on our official website to test the project.
33+
34+
35+
36+
## Getting Started
37+
38+
1. Clone the repository:
39+
40+
```bash
41+
git clone https://github.com/ComPDFKit/compdfkit-web-example-vanilla-javascript.git
42+
cd compdfkit-web-example-vanilla-javascript
43+
```
44+
45+
2. Install the dependencies of the example project with npm:
46+
47+
```bash
48+
npm install
49+
```
50+
51+
52+
53+
## License
54+
55+
Replace the `<Input your license here>` field in the `index.html` with the license you get from our Team.
56+
57+
ComPDFKit for Web supports flexible licensing options, please contact [our sales team](mailto:[email protected]) to know more. Each license is only valid for a root domain name and any of its subdomains. However, any documents, sample code, or source code distribution from the released package of ComPDFKit PDF SDK to any third party is prohibited.
58+
59+
60+
61+
## Run the Example
62+
63+
```bash
64+
npm start
65+
```
66+
67+
You can visit `http://localhost:8080` on your browser. Then you will be able to see the PDF file you want to display.
68+
69+
70+
71+
## Support
72+
73+
ComPDFKit has a professional R&D team that produces comprehensive technical documentation and guides to help developers. Also, you can get an immediate response when reporting your problems to our support team.
74+
75+
- For detailed information, please visit our [Guides](https://www.compdf.com/guides/pdf-sdk/web/overview) page.
76+
77+
- Stay updated with the latest improvements through our [Changelog](https://www.compdf.com/pdf-sdk/changelog-web).
78+
79+
- For technical assistance, please reach out to our [Technical Support](https://www.compdf.com/support).
80+
81+
- To get more details and an accurate quote, please contact our [Sales Team](https://compdf.com/contact-us).
82+
83+
84+
85+
## Note
86+
87+
We are glad to announce that you can register a ComPDFKit API account for a [free trial](https://api.compdf.com/api/pricing) to process 1000 documents per month for free.

‎favicon.ico

4.19 KB
Binary file not shown.

‎index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>ComPDFKit Web Viewer</title>
7+
</head>
8+
<!-- Import WebViewer as a script tag -->
9+
<script src='webviewer.global.js'></script>
10+
<body>
11+
<div id="app" style="width: 100%; height: 100vh;"></div>
12+
<script>
13+
ComPDFKitViewer.init({
14+
pdfUrl: './example/developer_guide_web.pdf',
15+
license: '<Input your license here>'
16+
}, document.getElementById('app')).then((core) => {
17+
docViewer = core.docViewer;
18+
19+
docViewer.addEvent('documentloaded', async () => {
20+
console.log('document loaded');
21+
})
22+
})
23+
</script>
24+
</body>
25+
</html>

‎package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "compdfkit-web-example-vanilla-javascript",
3+
"version": "1.0.0",
4+
"private": true,
5+
"scripts": {
6+
"start": "http-server -a localhost -p 8080 -o",
7+
"postinstall": "node scripts/copy-files.js"
8+
},
9+
"dependencies": {
10+
"@compdfkit_pdf_sdk/webviewer": "^2.2.2"
11+
},
12+
"devDependencies": {
13+
"http-server": "^14.1.1"
14+
}
15+
}

‎scripts/copy-files.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const { execSync } = require('child_process')
2+
3+
function copyFiles() {
4+
try {
5+
// Copy the WebViewer files from node_modules to the webviewer directory
6+
execSync('cp -r ./node_modules/@compdfkit_pdf_sdk/webviewer/dist ./webviewer')
7+
8+
// Copy the webviewer.global.js file
9+
execSync('cp ./node_modules/@compdfkit_pdf_sdk/webviewer/webviewer.global.js ./')
10+
} catch (error) {
11+
console.error(`exec error: ${error}`)
12+
}
13+
}
14+
15+
copyFiles()

0 commit comments

Comments
 (0)