sayanee / angularjs-pdf Goto Github PK

View Code? Open in Web Editor NEW

494.0 35.0 248.0 5.35 MB

:page_facing_up: An AngularJS directive <ng-pdf> to display PDF files with PDFJS

Home Page: http://sayan.ee/angularjs-pdf/

License: MIT License

HTML 0.44% JavaScript 99.38% CSS 0.18%

angularjs-pdf's Introduction

[UNMANTAINED] angular-pdf

An AngularJS directive ng-pdf to display PDF files with PDFJS.

Overview [demo]

Integrate PDF files right into web pages.

Requirements

Check package.json file for dependencies and their versions:

AngularJS - get the latest angular.min.js

PDFJS - build the files pdf.js and pdf.worker.js
Evergreen browsers

Features

next / previous page

zoom in / out / fit 100%
rotate clockwise
jump to a page number
when scrolling, the pdf controls will get fixed position at the top
define the view template
define the path to pdf with scope variable
handles error
show loading of pdf
show progress percentage of loading pdf
insert password for protected PDFs
dynamically change the pdf url
support retina canvas
set authorization or http headers

Getting Started

Install or copy over the file dist/angular-pdf.min.js or dist/angular-pdf.js
```
npm install angular-pdf --save
```
or
```
bower install angular-pdf --save
```

Include the path to the directive file in index.html

<script src="js/vendor/angular-pdf/dist/angular-pdf.js"></script>

Include the directive as a dependency when defining the angular app:
```
var app = angular.module('App', ['pdf']);
```

Include the directive with the attribute path to the partial under a controller

<div class="wrapper" ng-controller="DocCtrl">
    <ng-pdf template-url="/partials/viewer.html"></ng-pdf>
</div>

scale as an option

<ng-pdf template-url="/partials/viewer.html" scale=1></ng-pdf>

scale attribute can also be page-fit

<ng-pdf template-url="/partials/viewer.html" scale="page-fit"></ng-pdf>

page as an option for initial page number

<ng-pdf template-url="/partials/viewer.html" page=12></ng-pdf>

usecredentials as an option to add credentials / authorization

<ng-pdf template-url="/partials/viewer.html" usecredentials="true"></ng-pdf>

debug to enable debugging console output (optional, disabled by default)
```
<ng-pdf template-url="/partials/viewer.html" debug="true"></ng-pdf>
```

Include the canvas element to display the pdf in the template-url file
```
<canvas id="pdf-canvas"></canvas>
```

Include the path to the pdf file in the controller

app.controller('DocCtrl', function($scope) {
  $scope.pdfUrl = '/pdf/relativity.pdf';
});

Set custom headers, e.g. authorization headers with $scope.httpHeaders option

app.controller('DocCtrl', function($scope) {
  $scope.pdfUrl = '/pdf/relativity.pdf';
  $scope.httpHeaders = { Authorization: 'Bearer some-aleatory-token' };
});

Options

Next / Previous page: Include the controls in the view file as defined in the attribute template-url

<button ng-click="goPrevious()"><</span></button>
<button ng-click="goNext()">></span></button>

Zoom in / out / fit 100%: Include the controls in the view file as defined in the attribute template-url

<button ng-click="zoomIn()">+</span></button>
<button ng-click="fit()">100%</span></button>
<button ng-click="zoomOut()">-</span></button>

Rotate clockwise: Include the controls in the view file as defined in the attribute template-url and the initial class rotate0

<button ng-click="rotate()">90</span></button>
...
<canvas id="pdf-canvas" class="rotate0"></canvas>

include the css styles:

.rotate0 {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
.rotate90 {-webkit-transform: rotate(90deg); transform: rotate(90deg); }
.rotate180 {-webkit-transform: rotate(180deg); transform: rotate(180deg); }
.rotate270 {-webkit-transform: rotate(270deg); transform: rotate(270deg); }

Jump to page number: Include the controls in the view file as defined in the attribute template-url
```
<span>Page: </span><input type="text" min=1 ng-model="pageNum"><span> / {{pageCount}}</span>
```

Fixed pdf controls upon scrolling: Wrap the controls in the view file as defined in the attribute template-url with a tag nav with an ng-class. Amend the scroll amount as required.

<nav ng-class="{'pdf-controls fixed': scroll > 100, 'pdf-controls': scroll <= 100}">
...
</nav>

And include the relevant css styles as required:

.pdf-controls { width: 100%; display: block; background: #eee; padding: 1em;}
.fixed { position: fixed; top: 0; left: calc(50% - 480px); z-index: 100; width: 100%; padding: 1em; background: rgba(238, 238, 238,.9); width: 960px; }

open the file index.html with a web server

When url is base64 or Uint8Array

Create a Blob:

currentBlob = new Blob([result], {type: 'application/pdf'});
$scope.pdfUrl = URL.createObjectURL(currentBlob);

Handle error

In the controller, you can call the function $scope.onError:

$scope.onError = function(error) {
	// handle the error
	// console.log(error);
}

Show loading

In the controller, you can call the function $scope.onLoad when the pdf succesfully loaded:

$scope.loading = 'loading';

$scope.onLoad = function() {
  // do something when pdf is fully loaded
  // $scope.loading = '';
}

Show progress percentage

In the controller, you can call the function $scope.onProgress

$scope.onProgress = function(progress) {
	// handle a progress bar
	// progress% = progress.loaded / progress.total
	// console.log(progress);
}

Managing password requests

In the controller, you can use the function scope.onPassword. This function is called when the PDF require an opening password.

$scope.onPassword = function (updatePasswordFn, passwordResponse) {
  // if passwordResponse === PDFJS.PasswordResponses.NEED_PASSWORD
  // you can provide the password calling updatePasswordFn('THE_PASSWORD')
  // else if passwordResponse === PDFJS.PasswordResponses.INCORRECT_PASSWORD
  // provided password is not correct
};

Variations

If using with Angular UI modal, pageNum attribute is no longer required. Checkout the implementation

Similar projects

angular-pdf-viewer - a more self-contained directive

ng-pdfviewer

Credit

PDF example used is Relativity: The Special and General Theory by Albert Einstein as kindly organized and made available free by Project Gutenberg.

Contribute

This project is an OPEN Open Source Project. This means that:

Individuals making significant and valuable contributions are given commit-access to the project to contribute as they see fit. This project is more like an open wiki than a standard guarded open source project.

Please see CONTRIBUTING.md for details.

Versioning

This repository follows the Semantic Versioning guidelines:

For patches, run the command:
```
npm run release patch
```

For minor release, run the command:
```
 npm run release minor
```
For major release, run the command:
```
 npm run release major
```

License

MIT license

angularjs-pdf's People

Contributors

Stargazers

Watchers

Forkers

artbycrunk patrickkettner tguyard ramanujsen ngocthanhit rituvijay eciuca hell0wor1d mshahin364 candreoliveira f2er alirz ghongli winkervsbecks azizur77 yahyafakhroji gabrielcury citizenvc arlimus review--- picolo74 timnewbill dokenzy sensaid saktr22 aztech-forks zyncro maciekrb clkao elton0895 soufatn rajeshodayanchal matrixl johnking liyocee dawo85 sebasao matejhustava evoskova alexvijo itmyprofession nranjan54 dylannnn evargas15 critical-impact sun-hao outboundexplorer medlefsen rajeshreddym kosiakmd cwperry pravingate fernoftheandes king9527 lidasong2014 benlooi jhessu nibbleshifter nguyenvo15 williambewzenko okusnadi shettyashwitha mud2 reno77 zhard zwjjap haikyuu creotiv nagliyvred timtos simobasso beanext jcampalo cainsomniac dragsan yamagatch jsoklevski dmitryigoshin sivarajankumar vped alinvd tayssircherif hss-dev amangupta26 nextlevelshit dennybiasiolli sbhutia bobbwu dockinkong mikewirth android-sos elfaik abhineshwar vigneshklncit jiuyuehe deegeorgie yengtot yiqideren huespal mpmadhuranga

angularjs-pdf's Issues

issue when quickly goNext()

Hello,
I have a pdf (1.6Mo with images) that I converted with libreOffice from a ppt.
When I goNext() quickly (with a button) the content of the pdf get sometimes completely crazy (head upside and mix between pages).
Any idea where this come from ?

Can i convert a pdf to json using angular js?

It's not an issue. It's a requestt. Can anyone help me in converting pdf to json using angular js?

pdf worker

In the compression of time I found PDF always request worker JS but I am in your JS is set inside the worker disblead found no effect

Is there a way to dynamically change the pdf?

Im trying to make a select box which dynamically change the pdf in the view any advice about how to achieve this ?

Unknow provider when uglifying code

Hi,

I ran into this issue when I tried to "uglify" my libraries
Unknown provider: aProvider <- a <- ngPdfDirective
I had to modify the directive as follow

['$window', function($window) { ... }]

No big deal just thought it was worth mentioning it in case other people run into the same issue.
Thanks for the library.

Error when rerendering the PDF

I have an use case in which the user can switch to view another PDF. The first time, the PDF is displayed correctly.
However, when modifying the $scope.pdfUrl, it throws the following error:

Error: Invalid parameter in getDocument, need either Uint8Array, string or a parameter object pdf.combined.js:250
    at error (http://localhost:8080/facturation/vendor/pdfjs-dist/build/pdf.combined.js:252:15)
    at Object.getDocument (http://localhost:8080/facturation/vendor/pdfjs-dist/build/pdf.combined.js:1809:5)
    at link (http://localhost:8080/facturation/vendor/angular-pdf/dist/angular-pdf.js:93:15)
    at nodeLinkFn (http://localhost:8080/facturation/vendor/angular/angular.js:6212:13)
    at http://localhost:8080/facturation/vendor/angular/angular.js:6402:13
    at http://localhost:8080/facturation/vendor/angular/angular.js:7553:11
    at wrappedCallback (http://localhost:8080/facturation/vendor/angular/angular.js:10905:81)
    at http://localhost:8080/facturation/vendor/angular/angular.js:10991:26
    at Scope.$eval (http://localhost:8080/facturation/vendor/angular/angular.js:11906:28)

My code looks like this:

Controller:

$scope.pdfUrl = '/rest/bill/' + $scope.billId + '/download'.

Template:

<ng-pdf template-url="app/bill/templates/billPDF.html"
        canvasid="pdf-canvas"
        scale="1.5">
</ng-pdf>

billPDF.html:

<canvas id="pdf-canvas"></canvas>

blank canvas when $route.reload() if ngAnimate is in module dependances

Hello,
the testcase is here: http://jsbin.com/fuvasitoje/edit?html,output
If you just remove 'ngAnimate' from the dependances, everything run well.

pageCount on first load is not available

isolated scopes data-binding

If you are using for example http://angular-ui.github.io/bootstrap/#/modal which creates an isolated scope - then the pageNum attribute is no longer databinded.

To fix this issue I just moved pageNum one level deeper - so the pointer is referenced:
scope.pageData = {}; scope.pageData.pageNum = pageNum;

Also in the example:
Viewer.html has
<input type="text" min=1 ng-model="pageNum">
it should have (type and model changed)
<input type="number" min=1 ng-model="pageData.pageNum">

Error

Invalid parameter in getDocument, need either Uint8Array, string or a parameter object

working with angular 1.4.x

Hello,

I would like to know if this plugin works with Angular 1.4?

Best,
Dominic

add open open source link in readme and contributing.md

http://openopensource.org/

add ignore in bower.json

for bower info angular-pdf include ignore:

...
bower angular-pdf#*       invalid-meta angular-pdf is missing "ignore" entry in bower.json
...

gmail detecting as a virus when zipping the entire project

PDF Multipage

Is it possible to display all pages, without next and prev page?

printing

Hello,

How does one print from a pdf in chrome?

Thanks,
Evan

make dist/angular-pdf.js editable

All PRs till now were for dist/angular-pdf.js as changing example/js/directives/angular-pdf.js is not intuitive.

Hence, make file example/js/directives/angular-pdf.js be built with grunt uglify instead.

Not working in IE 9

Hi ,
I found the demo url is not loading the pdf content in IE 9 browser . Can you please let me know more details.

Kamal

detect correct language

with gitattributes

Progress Bar or Loading

How can we show the progress or loading spinner while the PDF is loading from the server. It takes a while before it actually displays the PDF so just a curious question if can show some spinner may be with pages loading

SyntaxError: Unexpected token <

Here is my controller:

angular.module('adventhpApp')
  .controller('DocCtrl', function($scope) {
  $scope.pdfUrl = '../images/test.pdf';
});

Here is my template: /views/partials/viewer.html:

<!DOCTYPE html>
<!--
Copyright 2012 Mozilla Foundation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Adobe CMap resources are covered by their own copyright and license:
http://sourceforge.net/adobe/cmap/wiki/License/
-->
<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="google" content="notranslate">
    <title>PDF.js viewer</title>


    <link rel="stylesheet" href="viewer.css"/>

    <script type="text/javascript" src="compatibility.js"></script>



<!-- This snippet is used in production (included from viewer.html) -->
<link rel="resource" type="application/l10n" href="locale/locale.properties"/>
<script type="text/javascript" src="l10n.js"></script>
<script type="text/javascript" src="../build/pdf.js"></script>



    <script type="text/javascript" src="debugger.js"></script>
    <script type="text/javascript" src="viewer.js"></script>

  </head>

  <body tabindex="1">
    <div id="outerContainer" class="loadingInProgress">

      <div id="sidebarContainer">
        <div id="toolbarSidebar">
          <div class="splitToolbarButton toggled">
            <button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="thumbs">
               <span data-l10n-id="thumbs_label">Thumbnails</span>
            </button>
            <button id="viewOutline" class="toolbarButton group" title="Show Document Outline" tabindex="3" data-l10n-id="outline">
               <span data-l10n-id="outline_label">Document Outline</span>
            </button>
            <button id="viewAttachments" class="toolbarButton group" title="Show Attachments" tabindex="4" data-l10n-id="attachments">
               <span data-l10n-id="attachments_label">Attachments</span>
            </button>
          </div>
        </div>
        <div id="sidebarContent">
          <div id="thumbnailView">
          </div>
          <div id="outlineView" class="hidden">
          </div>
          <div id="attachmentsView" class="hidden">
          </div>
        </div>
      </div>  <!-- sidebarContainer -->

      <div id="mainContainer">
        <div class="findbar hidden doorHanger hiddenSmallView" id="findbar">
          <label for="findInput" class="toolbarLabel" data-l10n-id="find_label">Find:</label>
          <input id="findInput" class="toolbarField" tabindex="41">
          <div class="splitToolbarButton">
            <button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="42" data-l10n-id="find_previous">
              <span data-l10n-id="find_previous_label">Previous</span>
            </button>
            <div class="splitToolbarButtonSeparator"></div>
            <button class="toolbarButton findNext" title="" id="findNext" tabindex="43" data-l10n-id="find_next">
              <span data-l10n-id="find_next_label">Next</span>
            </button>
          </div>
          <input type="checkbox" id="findHighlightAll" class="toolbarField">
          <label for="findHighlightAll" class="toolbarLabel" tabindex="44" data-l10n-id="find_highlight">Highlight all</label>
          <input type="checkbox" id="findMatchCase" class="toolbarField">
          <label for="findMatchCase" class="toolbarLabel" tabindex="45" data-l10n-id="find_match_case_label">Match case</label>
          <span id="findMsg" class="toolbarLabel"></span>
        </div>  <!-- findbar -->

        <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
          <div id="secondaryToolbarButtonContainer">
            <button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode" tabindex="19" data-l10n-id="presentation_mode">
              <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
            </button>

            <button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView" title="Open File" tabindex="20" data-l10n-id="open_file">
              <span data-l10n-id="open_file_label">Open</span>
            </button>

            <button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="Print" tabindex="21" data-l10n-id="print">
              <span data-l10n-id="print_label">Print</span>
            </button>

            <button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="Download" tabindex="22" data-l10n-id="download">
              <span data-l10n-id="download_label">Download</span>
            </button>

            <a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView" title="Current view (copy or open in new window)" tabindex="23" data-l10n-id="bookmark">
              <span data-l10n-id="bookmark_label">Current View</span>
            </a>

            <div class="horizontalToolbarSeparator visibleLargeView"></div>

            <button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page" tabindex="24" data-l10n-id="first_page">
              <span data-l10n-id="first_page_label">Go to First Page</span>
            </button>
            <button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page" tabindex="25" data-l10n-id="last_page">
              <span data-l10n-id="last_page_label">Go to Last Page</span>
            </button>

            <div class="horizontalToolbarSeparator"></div>

            <button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise" tabindex="26" data-l10n-id="page_rotate_cw">
              <span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
            </button>
            <button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="Rotate Counterclockwise" tabindex="27" data-l10n-id="page_rotate_ccw">
              <span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
            </button>

            <div class="horizontalToolbarSeparator"></div>

            <button id="toggleHandTool" class="secondaryToolbarButton handTool" title="Enable hand tool" tabindex="28" data-l10n-id="hand_tool_enable">
              <span data-l10n-id="hand_tool_enable_label">Enable hand tool</span>
            </button>

            <div class="horizontalToolbarSeparator"></div>

            <button id="documentProperties" class="secondaryToolbarButton documentProperties" title="Document Properties…" tabindex="29" data-l10n-id="document_properties">
              <span data-l10n-id="document_properties_label">Document Properties…</span>
            </button>
          </div>
        </div>  <!-- secondaryToolbar -->

        <div class="toolbar">
          <div id="toolbarContainer">
            <div id="toolbarViewer">
              <div id="toolbarViewerLeft">
                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="5" data-l10n-id="toggle_sidebar">
                  <span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
                </button>
                <div class="toolbarButtonSpacer"></div>
                <button id="viewFind" class="toolbarButton group hiddenSmallView" title="Find in Document" tabindex="6" data-l10n-id="findbar">
                   <span data-l10n-id="findbar_label">Find</span>
                </button>
                <div class="splitToolbarButton">
                  <button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="7" data-l10n-id="previous">
                    <span data-l10n-id="previous_label">Previous</span>
                  </button>
                  <div class="splitToolbarButtonSeparator"></div>
                  <button class="toolbarButton pageDown" title="Next Page" id="next" tabindex="8" data-l10n-id="next">
                    <span data-l10n-id="next_label">Next</span>
                  </button>
                </div>
                <label id="pageNumberLabel" class="toolbarLabel" for="pageNumber" data-l10n-id="page_label">Page: </label>
                <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1" tabindex="9">
                <span id="numPages" class="toolbarLabel"></span>
              </div>
              <div id="toolbarViewerRight">
                <button id="presentationMode" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="13" data-l10n-id="presentation_mode">
                  <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
                </button>

                <button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="14" data-l10n-id="open_file">
                  <span data-l10n-id="open_file_label">Open</span>
                </button>

                <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="15" data-l10n-id="print">
                  <span data-l10n-id="print_label">Print</span>
                </button>

                <button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="16" data-l10n-id="download">
                  <span data-l10n-id="download_label">Download</span>
                </button>
                <!-- <div class="toolbarButtonSpacer"></div> -->
                <a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView" title="Current view (copy or open in new window)" tabindex="17" data-l10n-id="bookmark">
                  <span data-l10n-id="bookmark_label">Current View</span>
                </a>

                <div class="verticalToolbarSeparator hiddenSmallView"></div>

                <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="18" data-l10n-id="tools">
                  <span data-l10n-id="tools_label">Tools</span>
                </button> 
              </div>
              <div class="outerCenter">
                <div class="innerCenter" id="toolbarViewerMiddle">
                  <div class="splitToolbarButton">
                    <button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="10" data-l10n-id="zoom_out">
                      <span data-l10n-id="zoom_out_label">Zoom Out</span>
                    </button>
                    <div class="splitToolbarButtonSeparator"></div>
                    <button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="11" data-l10n-id="zoom_in">
                      <span data-l10n-id="zoom_in_label">Zoom In</span>
                     </button>
                  </div>
                  <span id="scaleSelectContainer" class="dropdownToolbarButton">
                     <select id="scaleSelect" title="Zoom" tabindex="12" data-l10n-id="zoom">
                      <option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
                      <option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
                      <option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
                      <option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
                      <option id="customScaleOption" title="" value="custom"></option>
                      <option title="" value="0.5">50%</option>
                      <option title="" value="0.75">75%</option>
                      <option title="" value="1">100%</option>
                      <option title="" value="1.25">125%</option>
                      <option title="" value="1.5">150%</option>
                      <option title="" value="2">200%</option>
                    </select>
                  </span>
                </div>
              </div>
            </div>
            <div id="loadingBar">
              <div class="progress">
                <div class="glimmer">
                </div>
              </div>
            </div>
          </div>
        </div>

        <menu type="context" id="viewerContextMenu">
          <menuitem id="contextFirstPage" label="First Page"
                    data-l10n-id="first_page"></menuitem>
          <menuitem id="contextLastPage" label="Last Page"
                    data-l10n-id="last_page"></menuitem>
          <menuitem id="contextPageRotateCw" label="Rotate Clockwise"
                    data-l10n-id="page_rotate_cw"></menuitem>
          <menuitem id="contextPageRotateCcw" label="Rotate Counter-Clockwise"
                    data-l10n-id="page_rotate_ccw"></menuitem>
        </menu>

        <div id="viewerContainer" tabindex="0">
          <div id="viewer"></div>
        </div>

        <div id="errorWrapper" hidden='true'>
          <div id="errorMessageLeft">
            <span id="errorMessage"></span>
            <button id="errorShowMore" data-l10n-id="error_more_info">
              More Information
            </button>
            <button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
              Less Information
            </button>
          </div>
          <div id="errorMessageRight">
            <button id="errorClose" data-l10n-id="error_close">
              Close
            </button>
          </div>
          <div class="clearBoth"></div>
          <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
        </div>
      </div> <!-- mainContainer -->

      <div id="overlayContainer" class="hidden">
        <div id="promptContainer" class="hidden">
          <div id="passwordContainer" class="prompt doorHanger">
            <div class="row">
              <p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
            </div>
            <div class="row">
              <input type="password" id="password" class="toolbarField" />
            </div>
            <div class="buttonRow">
              <button id="passwordCancel" class="overlayButton"><span data-l10n-id="password_cancel">Cancel</span></button>
              <button id="passwordSubmit" class="overlayButton"><span data-l10n-id="password_ok">OK</span></button>
            </div>
          </div>
        </div>
        <div id="documentPropertiesContainer" class="hidden">
          <div class="doorHanger">
            <div class="row">
              <span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_file_size">File size:</span> <p id="fileSizeField">-</p>
            </div>
            <div class="separator"></div>
            <div class="row">
              <span data-l10n-id="document_properties_title">Title:</span> <p id="titleField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_author">Author:</span> <p id="authorField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_subject">Subject:</span> <p id="subjectField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_keywords">Keywords:</span> <p id="keywordsField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_creation_date">Creation Date:</span> <p id="creationDateField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_modification_date">Modification Date:</span> <p id="modificationDateField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_creator">Creator:</span> <p id="creatorField">-</p>
            </div>
            <div class="separator"></div>
            <div class="row">
              <span data-l10n-id="document_properties_producer">PDF Producer:</span> <p id="producerField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_version">PDF Version:</span> <p id="versionField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>
            </div>
            <div class="buttonRow">
              <button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">Close</span></button>
            </div>
          </div>
        </div>
      </div>  <!-- overlayContainer -->

    </div> <!-- outerContainer -->
    <div id="printContainer"></div>
<div id="mozPrintCallback-shim" hidden>
  <style scoped>
#mozPrintCallback-shim {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9999999;

  display: block;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
}
#mozPrintCallback-shim[hidden] {
  display: none;
}
@media print {
  #mozPrintCallback-shim {
    display: none;
  }
}

#mozPrintCallback-shim .mozPrintCallback-dialog-box {
  display: inline-block;
  margin: -50px auto 0;
  position: relative;
  top: 45%;
  left: 0;
  min-width: 220px;
  max-width: 400px;

  padding: 9px;

  border: 1px solid hsla(0, 0%, 0%, .5);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

  background-color: #474747;

  color: hsl(0, 0%, 85%);
  font-size: 16px;
  line-height: 20px;
}
#mozPrintCallback-shim .progress-row {
  clear: both;
  padding: 1em 0;
}
#mozPrintCallback-shim progress {
  width: 100%;
}
#mozPrintCallback-shim .relative-progress {
  clear: both;
  float: right;
}
#mozPrintCallback-shim .progress-actions {
  clear: both;
}
  </style>
  <div class="mozPrintCallback-dialog-box">
    <!-- TODO: Localise the following strings -->
    Preparing document for printing...
    <div class="progress-row">
      <progress value="0" max="100"></progress>
      <span class="relative-progress">0%</span>
    </div>
    <div class="progress-actions">
      <input type="button" value="Cancel" class="mozPrintCallback-cancel">
    </div>
  </div>
</div>

  </body>
</html>

Here is my reference to the /views/partials/viewer.html located on the html document where I need to embed the actual pdf:

<div class="wrapper" ng-controller="DocCtrl">
    <ng-pdf template-url="/views/partials/viewer.html"></ng-pdf>
</div>

<canvas id="pdf-canvas"></canvas>

Here is my app.js:


angular.module('adventhpApp',
[
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  '$strap.directives',
  'angularFileUpload',
  'ui.bootstrap',
  'ui.utils',
  'ui.layout',
  'ngGrid',
  'base64',
  'UserApp',
  'config',
  'pdf'
]).
config(function ($routeProvider, $locationProvider, $httpProvider, $sceProvider) {
  'use strict';

  $routeProvider.
    when('/settings', {
      templateUrl: 'partials/settings',
      controller: 'SettingsCtrl'
    }).
    when('/find', {
      templateUrl: 'partials/find',
      controller: 'FindCtrl'
    }).
    when('/case/:facility?/:encounter?', {
      templateUrl: 'partials/case',
      controller: 'CaseCtrl'
    }).
    when('/find/:facility?/:encounter?', {
      templateUrl: 'partials/find',
      controller: 'FindCtrl'
    }).
    when('/search/:term?', {
      templateUrl: 'partials/search',
      controller: 'SearchCtrl'
    }).
    when('/detail/:facility/:encounter/:term?', {
      templateUrl: 'partials/detail',
      controller: 'DetailCtrl'
    }).
    when('/pdf', {
      templateUrl: 'partials/pdf',
      controller: 'PdfCtrl'
    }).
    when('/login', {
      templateUrl: 'partials/login',
      public: true,
      login: true
    }).
    when('/reset-password', {
      templateUrl: 'partials/reset-password',
      public: true
    }).
    when('/set-password', {
      templateUrl: 'partials/set-password',
      public: true
    }).
    when('/api', {
      templateUrl: 'partials/api',
      public: true
    }).
    otherwise({
      redirectTo: '/find'
    });

  $locationProvider.html5Mode(true);

  $httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];

  //Disable $sce for initial development
  $sceProvider.enabled(false);

}).
run(function($rootScope, user) {
  user.init({ appId: '5303b9bb38f8e' });
});

My index.html:

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <base href="/">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bower_components/angular-ui-layout/ui-layout.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,500' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700' rel='stylesheet' type='text/css'>
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(app) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/bootstrap-timepicker/css/bootstrap-timepicker.min.css" />
    <link rel="stylesheet" href="bower_components/bootstrap-select/bootstrap-select.css" />
    <link rel="stylesheet" href="bower_components/bootstrap-datepicker/css/datepicker.css" />
    <link rel="stylesheet" href="bower_components/bootstrap-datepicker/css/datepicker3.css" />
    <link rel="stylesheet" href="bower_components/ng-grid/ng-grid.min.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="http://css-spinners.com/css/spinner/spinner.css" type="text/css">
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/layout.css">
    <link rel="stylesheet" href="styles/font-awesome.min.css">
    <!-- endbuild -->
  </head>
  <body ng-app="adventhpApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container-full">

    <div class="row-fluid">
        <div class="app-header">
            <div class="pad-top">
                <div class="logo"><img src="images/advent.jpg" /></div>
                <div class="user-controls">
                    <div class="username">
                        <div ng-show="spinner" class="spinner">
                            Loading...
                        </div>

                        <div ng-show="user.authorized">
                        <div class="btn-group">
                          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                            <div style="float:left; padding-right: 6px; padding-top:2px;">{{user.first_name}} {{user.last_name}}
                            <span class="caret"></span>
                            </div>
                            <div class="userphoto"><img src="images/avatar.jpg" /></div>
                          </a>
                          <ul class="dropdown-menu">
                            <li><a href="#" ua-logout><i class="fa fa-circle"></i> Log Out</a></li>
                            <li><a href="#"><i class="fa fa-circle"></i> Profile</a></li>
                            <li><a href="#"><i class="fa fa-circle"></i> Settings</a></li>
                          </ul>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="container-full main" role="navigation" bs-navbar>
            <ul class="nav nav-tabs">
                <li data-match-route="/find.*" class="search-btn"><a href="/find"><i class="fa fa-search"></i>Find</a></li>
                <li data-match-route="/case.*"><a href="/case/{{facility}}/{{encounter}}">Facility: {{facility}} | Encounter: {{encounter}} <i class="fa fa-times-circle close-tab"></i></a></li>
                <li data-match-route="/pdf.*"><a href="/pdf">PDF</a></li>
            </ul>
            <div class="container-full" ng-view=""></div>
        </div>

    </div>
    </div>
    <!-- end container -->

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID
    <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script> -->

    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->
    <!-- <script src="bower_components/ng-file-upload/angular-file-upload-shim.js"></script> -->
    <!-- build:js(app) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/userapp/userapp.client.js"></script>
    <script src="bower_components/userapp-angular/angularjs.userapp.js"></script>
    <script src="bower_components/autotype/index.js"></script>
    <script src="bower_components/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
    <script src="bower_components/bootstrap-select/bootstrap-select.js"></script>
    <script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
    <script src="bower_components/ng-file-upload/angular-file-upload.js"></script>
    <script src="bower_components/angular-base64/angular-base64.js"></script>
    <script src="bower_components/angular-base64/angular-base64.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-ui-utils/ui-utils.js"></script>
    <script src="bower_components/angular-ui-layout/ui-layout.js"></script>
    <script src="bower_components/lodash/dist/lodash.compat.js"></script>
    <script src="bower_components/restangular/dist/restangular.js"></script>
    <script src="bower_components/angular-pdf/dist/angular-pdf.js"></script>
    <script src="bower_components/ng-grid/build/ng-grid.min.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/search.js"></script>
    <script src="scripts/controllers/detail.js"></script>
    <script src="scripts/controllers/pdf.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/find.js"></script>
    <script src="scripts/controllers/case.js"></script>
    <script src="scripts/controllers/doc.js"></script>
    <script src="scripts/controllers/settings.js"></script>
    <script src="scripts/services/cloudant.js"></script>
    <script src="scripts/config.js"></script>
    <script src="scripts/directives/resize.js"></script>
    <!-- endbuild -->
</body>
</html>

Running Angular 1.2.15. Any help would be greatly appreciated!

Add browser test for chrome, safari, firefox

With Chai, Mocha, Selenium Webdriver, Safari driver, Chrome driver and Firefox.

Test that takes screenshots on all browsers for various actions

Related issue #23

page-fit doesn't work

I am trying to render a responsive pdf, and page-fit will not work. I noticed one problem. scale is set like so:

scale = attrs.scale > 0 ? attrs.scale : 1,

Then the page-fit logic does this if:

if (attrs.scale === 'page-fit' && !scale) {

That will never be true, because scale gets set to 1 by the ternary statement.

Even when I remove the second condition from the if, it still does not work though. clientWidth and clientHeight are both 0, so it doesn't scale anything.

Would be awesome to get this working, and I don't mind doing the work, if someone can give me a little guidance.

Empty canvas?

I did just the following reference for the ng-controller:

function FilesController($scope, $http) {
  $scope.pdfUrl = '/doc.pdf';
}

And the view ist just as simple as:

<div ng-controller="FilesController">
    <nav ng-class="{'pdf-controls fixed': scroll > 100, 'pdf-controls': scroll <= 100}">
      <button ng-click="goPrevious()"><</span></button>
      <button ng-click="goNext()">></span></button>

      <button ng-click="zoomIn()">+</span></button>
      <button ng-click="zoomOut()">-</span></button>

      <button ng-click="rotate()">90</span></button>

      <span>Page: </span>
      <input type="text" min="1" ng-model="pageNum">
      <span> / {{ pageCount }}</span> (is empty)

    </nav>

    <hr>

    <canvas id="pdf-canvas" class="rotate0"></canvas>
</div>

This should work, right? Strange it doesn't.. No console errors.. What am I missing?

how do you change the pdf source

When i change the pdf url in the controller, it dosn't render the new pdf

add jscs to grunt task

E.g. version for angularjs, angular-route and pdf js

display the pdf if the url is base64 or Uint8Array

Hi @sayanee the pdfjs-dist is currently in 1.2.83. Any plan of updating the bower to the newest version or any known bugs?
https://github.com/mozilla/pdfjs-dist/blob/master/package.json

Github fork ribbon on demo page

fork ribbon on demo page

Ionic

Before I fork this plugin, I have some questions below:

This plugin support for ionic framework or not?
Do you think this plugin will get same problem with this issue?

add CONTRIBUTING.md

Toolbar page input und next button

Hi!

In your demo http://sayan.ee/angularjs-pdf/ choose "2" at the page inputfield of the toolbar:
page 2 is shown.
Then press the next button >
page 21 is shown.
The number "1" is appended to the number that was prompted in the inputfield which is not correct.

ng-repeat pages

Looking for a way to ng-repeat through the pages - so they all show at once?

Blob data instead a pdf file

like this:

var file = new Blob([data_from_some_api], { type: "application/pdf" });
var fileUrl = URL.createObjectURL(file);

pdf viewer not working in safari

The demo seems not working in Safari browser, any idea how to solve this?

many thanks
xudong

Is there a way to load all pages, so that the page can be scrolled like in pdf js viewer

I have issues using pdf js viewer,so I want this so that I can scroll through all pages.

Load PDF URL from Promise

Is there any way to do this? Trying to mess around with doing synchronys calls, but that just feels wrong in Angular... As I see it currently, the $scope.pdfUrl needs to be set as soon as the controller loads, otherwise it throws an error. Perhaps my implementation is wrong?

http://sayan.ee/angularjs-pdf/ - Not working in Safari

Tried to open in Safari but couldn't.

Can u please check.

Regards
Sameer

Page attribute doesn't work

There is a issue with page attribute, whatever you do is overwritten to page one when the directive is initialized, you can see it in the example of the project.

Crashes Chrome if Click > button

Go to http://sayan.ee/angularjs-pdf/
Shift-Refresh (i.e. ensure no cached assets)
Click >

Tested in OSX Chrome 32.0.1700.77 and 34.0.1789.0 canary. No issue in either Firefox 26.0 or Safari 7.0.1 (9537.73.11).

Just FYI

Not able to select the text inside the pdfviewer.

Hi sayanee,
First of all thank you very much for writing this directive. This is really for so many people. Can you please add the text selection as well to this directive so that the pdfviewer will be more useful.

Thanks & Regards,

canvas id should be configurable

current <canvas id="pdf-canvas"> is fixed. the id attribute should be configurable by the developer.

Unable to Open PDF files in Firefox, iPhone and Android devices

Hi,

Im using I phone 5s Safari Browser the issue is like i'm unable to open pdf files in it instead it displays a blank page.

In Android devices the pdf files are being downloaded instead of displaying it.

I even checked the default pdf ‪http://sayan.ee/angularjs-pdf provided by you in the code.

you just have to handle the PDFJS.getDocument() promise error.

and allow to bind a function to handle it outside the directive

Thank you

Pdf url set as an attribute instead of use $scope

Maybe is not an issue, but it will be a major improvement setting pdfUrl
throught an attribute of the directive instead of using controller's scope.

add bower dependencies

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.