Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angularjs-pdf-viewer

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angularjs-pdf-viewer

An AngularJS directive to display PDFs

  • 1.0.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Angular PDF Viewer

An AngularJS directive to display PDFs. DEMO

Dependencies

  1. AngularJS
  2. PDFJS

Usage

  1. npm install angularjs-pdf-viewer yarn add angularjs-pdf-viewer

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

<script src="node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angularjs-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 && yarn add 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.

FAQs

Package last updated on 04 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc