If you have read the previous post, then you might be looking forward to discarding the Object Tag usage to render pdf and go for the much more popular PDFJS implementation which will run in IE 11 as well as it does not rely on browser pdf plugin support.
A well documented Angular implementation of PDFJS :- https://github.com/sayanee/angularjs-pdf
You would need to bower install angular-pdf, pdfjs and pdfjs-worker.
I was having some issues (in how the document is fetched, additional headers, OTPs, etc) in using the angular-pdf Directive as it is so I took it out of my bower components, made some modifications to it and added it as a local dependency. You can skip this step and do the next step if you want to figure out whether you will be facing any issues on using the directive as it is. You can always come back to this step if things aren't working out as you expected them to be.
The modifications to https://github.com/sayanee/angularjs-pdf/blob/master/dist/angular-pdf.js are available in this gist I made :- https://gist.github.com/avikganguly01/4eff280864d09bdbbfd0
The main difference between the two is instead of watching an url, I am watching a data variable "pdfData" which my wrapper directive below is taking care of populating after base64 decoding and converting to an Uint8Array.
You need to make the following modifications to the directive available in Part I of this blogpost.
- Replace the parent div of the object tag in the template with the following snippet.
'<div class="wrapper" ng-if="application.doc.type == \'application/pdf\'">' +
'<ng-pdf template-url="views/viewer.html" canvasid="{{masterid}}" scale="0.66">' +
'</ng-pdf>' +
'<div style="overflow:auto">' +
'<canvas id="{{masterid}}" class="rotate0"></canvas>' +
'</div>' +
'</div>' +
- Replace the logic in the http success callback of the fetchPdf function.
//$scope.pdfData = "data:application/pdf;base64," + pdfData.data;
var raw = atob(pdfData.data);
var arr = new Uint8Array(new ArrayBuffer(raw.length));
for (var i = 0; i < raw.length; i++) {
arr[i] = raw.charCodeAt(i);
}
$scope.pdfData = arr;
The only small thing left is the little bit of html for the viewer.html template. All the options are mentioned under "Options" section of angular-pdf documentation. Just in case you want to copy/paste, here's the html as well. A very useful addition would be the HandTool available in PDFJS which I am looking forward to send as a pull request to the Angularjs-pdf repository.
<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()">Rotate</span></button>
<span>Page: </span>
<input type="text" min=1 ng-model="pageNum">
<span> / {{pageCount}}</span>
</nav>
