Skip to content
This repository was archived by the owner on Oct 10, 2019. It is now read-only.

Some new features #19

Open
wants to merge 9 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ AngularJS PDF viewer directive using pdf.js.
``` html
<button ng-click="prevPage()">&lt;</button>
<button ng-click="nextPage()">&gt;</button>
<button ng-click="setScale(1.8)">ZOOM</button>
<br>
<span>{{currentPage}}/{{totalPages}}</span>
<br>
<pdfviewer src="test.pdf" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
<pdfviewer scale="{{scale}}" pages-to-show="{{pages}}" src="test.pdf" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
```

and in your AngularJS code:

``` js

var app = angular.module('testApp', [ 'ngPDFViewer' ]);

app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope, pdf) {
Expand All @@ -28,6 +28,10 @@ app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope, pdf)
$scope.viewer.prevPage();
};

$scope.setScale = function(v) {
$scope.instance.setScale(v);
};

$scope.pageLoaded = function(curPage, totalPages) {
$scope.currentPage = curPage;
$scope.totalPages = totalPages;
Expand Down
16 changes: 16 additions & 0 deletions example/css/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.pdf{
background-color: #4d4d4d;
}

.pdf canvas:first-child {
margin-top: 15px;
}

.pdf canvas{
margin-top: 25px;
box-shadow: 4px 4px black;
}

.pdf canvas:last-child{
margin-bottom: 15px;
}
38 changes: 25 additions & 13 deletions example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,45 @@
<html>
<head>
<meta charset="utf-8">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="pdf.compat.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="pdf.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="pdf.compat.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
<script src="ng-pdfviewer.js"></script>
<script src="test.js"></script>
<title>ng-pdfviewer.js test</title>
</head>
<body ng-app="testApp">
<div ng-controller="TestController" class="text-center container">
<body data-ng-app="testApp">
<div data-ng-controller="TestController" class="text-center container">
<div class="row">
<div class="btn-group">
<button class="btn" ng-click="pdfURL='test.pdf'">Load test.pdf</button>
<button class="btn" ng-click="pdfURL='test2.pdf'">Load test2.pdf</button>
<button class="btn" data-ng-click="pdfURL='test.pdf'">Load test.pdf</button>
<button class="btn" data-ng-click="pdfURL='test2.pdf'">Load test2.pdf</button>
</div>
<div class="btn-group">
<button class="btn" ng-click="gotoPage(1)">|&lt;</button>
<button class="btn" ng-click="prevPage()">&lt;</button>
<button class="btn" ng-click="nextPage()">&gt;</button>
<button class="btn" ng-click="gotoPage(totalPages)">&gt;|</button>
<button class="btn" data-ng-click="gotoPage(1)">|&lt;</button>
<button class="btn" data-ng-click="prevPage()">&lt;</button>
<button class="btn" data-ng-click="nextPage()">&gt;</button>
<button class="btn" data-ng-click="gotoPage(totalPages)">&gt;|</button>
<button class="btn" data-ng-click="setScale(1.8)">ZOOM</button>
<input type="text" data-ng-model="pages"/>
</div>
</div>
<div class="row">
<span class="label" ng-show="totalPages">{{currentPage}}/{{totalPages}}</span>
<span class="label" data-ng-show="totalPages">{{currentPage}}/{{totalPages}}</span>
</div>
<div class="row">
<pdfviewer src="{{pdfURL}}" on-page-load='pageLoaded(page,total)' id="viewer" load-progress='loadProgress(loaded, total, state)'></pdfviewer>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 pdf">
<pdfviewer src="{{pdfURL}}" scale="{{scale}}" pages-to-show="{{pages}}" on-page-load='pageLoaded(page,total)' id="viewer" load-progress='loadProgress(loaded, total, state)'></pdfviewer>
</div>
</div>
</div>
</body>
Expand Down
Loading