• Stars
    star
    276
  • Rank 149,319 (Top 3 %)
  • Language
    CSS
  • License
    MIT License
  • Created about 10 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An AngularJS directive to display PDFs

Angular PDF Viewer

An AngularJS directive to display PDFs. DEMO

Dependencies

  1. AngularJS
  2. PDFJS

Usage

  1. bower install angular-pdf-viewer

  2. Include the path to the lib, AngularJS and PDFJS:

<script src="bower_components/pdfjs-dist/build/pdf.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-pdf-viewer/dist/angular-pdf-viewer.min.js"></script>
  1. Include the lib as a dependency in your angular app:
var app = angular.module('App', ['pdf']);

Directive

The URL, request headers, scale and delegate-handle can be set using the attributes:

<pdf-viewer
    delegate-handle="my-pdf-container"
    url="pdfUrl"
    scale="1"
    show-toolbar="true"
    headers="{ 'x-you-know-whats-awesome': 'EVERYTHING' }"></pdf-viewer>

Delegate Service (pdfDelegate)

The pdfDelegate service allows you to access and control individual instances of a directive. This allows us to have multiple instances of the same directive in the same controller.

Inject the pdfDelegate service into your controller. You can then fetch an instance using it's delegate handle and call methods on it:

pdfDelegate.$getByHandle('my-pdf-container').zoomIn();

The following methods are available to the delegate:

  • prev
  • next
  • zoomIn(amount) default amount = 0.2
  • zoomOut(amount) default amount = 0.2
  • zoomTo(amount)
  • rotate (clockwise by 90 degrees)
  • getPageCount
  • getCurrentPage
  • goToPage(pageNumber)
  • load

Change the PDF File

In order to replace the active PDF with another one, you can call the load method of the delegate. For example:

pdfDelegate
    .$getByHandle('my-pdf-container')
    .load('url-of-the-new-file.pdf');

Example

Run npm install && bower install to install all dependencies. And then gulp dev to start a local server. The example will now be available at localhost:3000/src

Toolbar

The default toolbar can be shown or hidden using the show-toolbar attribute. Since the PDF can be easily controlled using the delegate service it's quite trivial to build a custom toolbar. Or place the toolbar on a separate scope.

Similar projects

  1. angularjs-pdf
  2. ng-pdfviewer

Credit

PDF examples used are Relativity: The Special and General Theory by Albert Einstein as kindly organized and made available free by Project Gutenberg. And the This is Material Design by Google.

More Repositories

1

xvg

🔬 debug SVG paths in the browser
HTML
273
star
2

sketchbook

👨🏽‍🔬 experiments in generative art
JavaScript
209
star
3

swipe-li

A three pane swipeable element. Swipe right for accept. Swipe left for reject.
JavaScript
176
star
4

a-triangle-everyday

▲ A triangle everyday for 30 days
JavaScript
171
star
5

solarstorm

JavaScript
150
star
6

angularWebglDirective

A basic example of a WebGL directive built using three.js and angular.js
JavaScript
99
star
7

personal-goals

86
star
8

tachyons-measured

📏 📐 A set of higher order components for creating stateless functional UI components using tachyons.
JavaScript
68
star
9

spotify-artist-lookup

A React Native demo project
JavaScript
68
star
10

3d-particle-effects-demo

JavaScript
65
star
11

varun.ca

👨🏽‍💻 my website and blog
MDX
58
star
12

locator

A set of google location services for angularJS
JavaScript
51
star
13

awesome-functional-css

A collection of awesome things regarding functional CSS
41
star
14

threejs-journey-level-1-with-r3f-storybook

JavaScript
41
star
15

react-icon-system-demo

⚛✨⚡
JavaScript
34
star
16

mathematics-of-animation

📐✏️ Slides from my talk on Mathematics of Animation @ .concat() 2018
CSS
34
star
17

shader-sketches

JavaScript
29
star
18

react-svg-starter

🐴 Kickstart your React & SVG projects
JavaScript
29
star
19

fermat-point

A fermat point calculator built using SVG and ReactJS
HTML
26
star
20

storybook-blocks

JavaScript
25
star
21

draper

🍸 React Native style utilities
JavaScript
24
star
22

gems

💎 Gem generator with React and SVG
JavaScript
23
star
23

oam-site

●▲■ is an experiment in mixing sound, colours and geometries on the web.
JavaScript
23
star
24

joystick

📍 Proof of concept for in browser animation rigging
CSS
23
star
25

vue-icon-system-demo

🔽✨⚡️
JavaScript
22
star
26

grid-experiments

CSS Grid Experiments
HTML
19
star
27

explorers-on-the-moon

HTML
16
star
28

ng2-icon-system-demo

🆖✨⚡
JavaScript
16
star
29

carnival-nights

Confetti cannon tutorial
JavaScript
14
star
30

p5js-seed

A great starting point for building a p5.js project
JavaScript
13
star
31

3d-sketches

HTML
11
star
32

generative-parts

Experiments in generative design
JavaScript
11
star
33

awesome-components

A collection of awesome things related to building UI components
8
star
34

penplot-sketches

JavaScript
8
star
35

programming-design-systems-workshop

JavaScript
8
star
36

alfred-react-launcher

📎 Alfred 3 workflow to access the React & React Native Documentation
JavaScript
7
star
37

material-vector-field

Canvas experiment inspired by Google Material Design guide
JavaScript
7
star
38

varun.ca-jekyll

old website
CSS
6
star
39

truncation

Truncations of a polygon
HTML
6
star
40

splash

💦
JavaScript
6
star
41

self-avoiding-walkers

JavaScript
5
star
42

react-icons-demo

JavaScript
5
star
43

chillwave

SVG version of the "This Also" loader
CSS
5
star
44

triangle-catalogue-webpack-example

🐲 Demo project for my "Slaying Your Webpack Dragon" talk at CSS DevConf
JavaScript
5
star
45

jali

CSS
5
star
46

triangle-lab-demo

JavaScript
5
star
47

formations

⚽ recreating football formations with CSS grids
JavaScript
5
star
48

luna-9-flight

🌏🚀🌔
HTML
4
star
49

material-animation

Google Material style animations with AngularJS
JavaScript
4
star
50

ellsworthKellyAnimated

Animating the work of Ellsworth Kelly with js and canvas
JavaScript
4
star
51

sb-a11y-testing

JavaScript
4
star
52

snappy-apps

CSS
3
star
53

beacon-on-mars

📍🌕
JavaScript
3
star
54

creative-coding-with-react-svg

📐✏️
JavaScript
3
star
55

What-s-Your-News-Music-Machine

A simple audio mixer/musical app for What's Your News show
Objective-C
3
star
56

ArduinoVGAHack

Audio reactive hacking of VGA lines with Arduino
Java
3
star
57

hookes-law

A site explaining the Hooke's Law.
CSS
3
star
58

triangle.life

📐 All the triangles
HTML
3
star
59

slaying-your-webpack-dragon

🐲 slides for my CSS DevConf Talk
JavaScript
3
star
60

winkerVSbecks.com-jekyll

Jekyll source for my old portfolio website
JavaScript
2
star
61

sb-docs-netlify-cms

JavaScript
2
star
62

eukleides-diagrams

📐📏 geometry diagrams
2
star
63

pizza-theorem

React app to generate slices of a circle that satisfy the Pizza Theorem
Shell
2
star
64

react-component-tutorial

HTML
2
star
65

polygon-slicer

Slice up convex polygons
JavaScript
2
star
66

rangle-geometric-abstractions

📐✏️
JavaScript
2
star
67

rainbow-button

JavaScript
2
star
68

dot-files

Dot files backup
Shell
2
star
69

jamieXX

Far Nearer — Jamie XX animated with ReactJS and rdio API
JavaScript
1
star
70

react-redux-radium-seed

Seed project for React with Webpack, Redux & Radium
JavaScript
1
star
71

figma-plugin-examples

TypeScript
1
star
72

animated-graph

HTML
1
star
73

trash-panda

my waste collection schedule for this week
JavaScript
1
star
74

also-solving-sol

JavaScript
1
star
75

sistercode

HTML
1
star
76

chaos-theory

JavaScript
1
star
77

react-training

Lesson materials for React training
HTML
1
star
78

LambdaFunction

old portfolio website
HTML
1
star
79

winkerVSbecks

1
star
80

the-core

JavaScript
1
star
81

canvas-sketch-controls-demo

JavaScript
1
star
82

premier-league

⚽🏆
JavaScript
1
star
83

le-blog

old blog
CSS
1
star
84

craft-beer

One stop shop for Ontario craft beer
JavaScript
1
star
85

chromatic-mono-repo-test

TypeScript
1
star
86

every-thing-will-be-fine

CSS
1
star
87

poorly-drawn

JavaScript
1
star
88

datocms-next.js-blog-demo

JavaScript
1
star
89

The-Receipt-Site

Digitally recreating some of my favourite receipts and IDs
JavaScript
1
star
90

path-compiler

📝 🎨
JavaScript
1
star
91

colour-field

JavaScript
1
star
92

3december-2017

JavaScript
1
star
93

storybook-launcher

Raycast extension for searching components in your Storybook and opening their stories in the browser
TypeScript
1
star
94

styling-with-hoc

⚡ 💅🏽
JavaScript
1
star
95

meromorphic-functions

JavaScript
1
star
96

ng2-tachyon-examples

TypeScript
1
star
97

rangeele-yantra-fxhash

JavaScript
1
star
98

driveTimePolygon

Generates a very rough polygon describing how far you can drive in all directions within a specified time period (not accounting for traffic).
JavaScript
1
star
99

jupiter

JavaScript
1
star