WebViewer is a powerful JavaScript-based PDF Library that's part of the PDFTron PDF SDK. 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.
This repo is specifically designed for any users interested in integrating WebViewer into Angular project. This project was generated with Angular CLI version 15.1.0.
You can watch a video that walks you through how to embed PDFTron's WebViewer inside of Angular project.
- Customizable out-of-the-box UI
- PDF Viewer
- DOCX Editor
- Annotation & Markup
- Generate PDFs from DOCX template
- Digital Signatures
- PDF Text Editing
- Page Manipulation
- Redaction
- Form Building
- Annotate Videos
- More
You can obtain the trial key by signing-up on our developer portal.
Before you begin, make sure your development environment includes Node.js.
In order to set the license key, you will need to set the string in the WebViewer sample. One such way is by passing it into the constructor of the WebViewer: https://docs.apryse.com/documentation/web/faq/add-license/#passing-into-constructor
Follow the steps below to set the license key in this sample:
- Locate the app.component.ts file at /src/app/app.component.ts
- Replace "your_license_key" with your license
- Save the file
git clone https://github.com/PDFTron/webviewer-angular-sample.git
cd webviewer-angular-sample
npm install
npm start
Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run npm run build
to build the development build of the project.
Run npm run build-prod
to build the production build of the project.
The build artifacts will be stored in the dist/
directory.
To run the build, navigate to the dist/angular
directory, and run http-server
. Navigate to the url: host:port/index.html to see the app
(http-party/http-server#525).
See API documentation.
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 webviewer.component.ts:
ngAfterViewInit(): void {
WebViewer({
path: '../lib',
initialDoc: '../files/webviewer-demo-annotated.pdf',
fullAPI: true
}, this.viewer.nativeElement);
}
You can refer to this guide for more information
See contributing.
See license.