Programming Languages

typescript

32286 projects

javascript

184084 projects - #8 most used programming language

CSS

56736 projects

HTML

75241 projects

Labels

angular webviewer

WebViewer - Angular sample

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 7.0.3.

You can watch a video that walks you through how to embed PDFTron's WebViewer inside of Angular project.

Demo

You can explore all of the functionality in our showcase.

Initial setup

Before you begin, make sure your development environment includes Node.js.

Install

git clone https://github.com/PDFTron/webviewer-angular-sample.git
cd webviewer-angular-sample
npm install

Run

npm start

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

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).

WebViewer APIs

See API documentation.

Enabling full API

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