var app = angular.module('app', [])
.directive('demo',[ function() {
console.log('~~~~~~~~~~~~~~~~~~~~~start');
return {
link: function (scope, element, attrs, ctrl, transclude){
//scope.hiddenDom = element[0].querySelector('strong[name=hiddenInfo]');
//var text = scope.hiddenDom.innerHTML;
//scope.name = (text)? text : 'world';
scope.page = 1;
scope.next = function(){
scope.page ++;
console.log(scope.page);
scope.loadPage(scope.page);
}
scope.prev = function(){
scope.page --;
console.log(scope.page);
scope.loadPage(scope.page);
}
scope.loadPage = function(page){
scope.pFile.getPage(page).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var task = page.render({canvasContext: context, viewport: viewport})
task.promise.then(function(){
//console.log(canvas.toDataURL('image/jpeg'));
document.getElementById("extracted").src=canvas.toDataURL('image/jpeg');
});
});
}
//
// Asynchronous download PDF as an ArrayBuffer
//
var pdfDom = document.getElementById('pdfInput');
pdfDom.onchange = function(ev) {
if (file = document.getElementById('pdfInput').files[0]) {
fileReader = new FileReader();
fileReader.onload = function(ev) {
console.log(ev);
PDFJS.getDocument(fileReader.result)
.then(function (p) {
//
// Fetch the first page
//
console.log(p)
scope.pFile = p;
scope.loadPage(scope.page);
/*
p.getPage(scope.page).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var task = page.render({canvasContext: context, viewport: viewport})
task.promise.then(function(){
//console.log(canvas.toDataURL('image/jpeg'));
document.getElementById("extracted").src=canvas.toDataURL('image/jpeg');
});
});
*/
}, function(error){
console.log('error on processing',error);
});
};
fileReader.readAsArrayBuffer(file);
}
};
}
}
}]);
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js" data-semver="1.5.3"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<!--<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>-->
<!--<script src="https://raw.githubusercontent.com/mozilla/pdf.js/gh-pages/build/pdf.worker.js"></script>-->
<script src="app.js"></script>
</head>
<body>
<!-- <demo>
Hello {{name}}!
<strong name="hiddenInfo" ng-show="false">secret world</strong>
</demo> -->
sample in-progress; to view pdf file, choose a pdf file locally <hr>
<demo>
<button type="button" ng-click="prev()">Prev</button>
<button type="button" ng-click="next()">Next</button>
<hr>
<input id='pdfInput' type='file'/> <br>
<canvas id="the-canvas" style="border:1px solid lightGray"></canvas>
<hr>
<img width="50%" id="extracted" src="" alt="pdf image"/>
</demo>
<script>
//
// Disable workers to avoid yet another cross-origin issue (workers need the URL of
// the script to be loaded, and dynamically loading a cross-origin script does
// not work)
//
PDFJS.disableWorker = true;
</script>
</body>
</html>
/* Put your css in here */