Ionic framework PdfViewer - pdf

Question

I want to develop pdf ebook application for mobile. Is there pdf viewer component for ionic framework. I fond mozilla pdf.js . I need ionic project example.

Answer 1

Have you tried the angular module ng-pdfviewer? Because angular works under the hood of Ionic.

Answer 2

var app = angular.module('testApp', [ 'ngPDFViewer' ]);
app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope, pdf) {
$scope.viewer = pdf.Instance("viewer");
$scope.nextPage = function() {
$scope.viewer.nextPage();
};
$scope.prevPage = function() {
$scope.viewer.prevPage();
};
$scope.pageLoaded = function(curPage, totalPages) {
$scope.currentPage = curPage;
$scope.totalPages = totalPages;
};
}]);
And the Directive uses the above pdf.js file
and the Html is bellow:
<button ng-click="prevPage()"><</button>
<button ng-click="nextPage()">></button>
<br>
<span>{{currentPage}}/{{totalPages}}</span>
<br>
<pdfviewer src="test.pdf" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
and using ng-pdf should solve your problem.

Answer 3

Have you tried this Phonegap plugin https://github.com/ti8m/DocumentHandler
Below is how I used it.
$scope.HandleDocumentPlugin = function () {
if (DocumentViewer != null) {
DocumentViewer.previewFileFromUrlOrPath(
function () {
console.log('success');
}, function (error) {
if (error == 53) {
console.log('No app that handles this file type.');
var alert = $ionicPopup.alert({
title: 'Alert!',
template: "There is no app installed that handles this file type."
});
alert.then(function (res) {
});
}
}, $scope.PDF_URL);
}
else if (DocumentHandler != null) {
DocumentHandler.previewFileFromUrlOrPath(
function () {
console.log('success');
}, function (error) {
if (error == 53) {
console.log('No app that handles this file type.');
var alert = $ionicPopup.alert({
title: 'Alert!',
template: "There is no app installed that handles this file type."
});
alert.then(function (res) {
});
}
}, $scope.PDF_URL);
}
else {
console.log("error");
}
}

Answer 4

You could use Cordova - InAppBrowser since it will be able to display pdf just open specify the static or dynamic path . you do need to add other modules as this an be also used to open web pages also you could use
https://github.com/initialxy/cordova-plugin-themeablebrowser
to theme the pdf openings for custom loading to hide url etc fields
these two approaches can be used to open a simple pdf document for reading purposes.
but for more specific options you should go with
https://github.com/akrennmair/ng-pdfviewer
which requires pdf.js and pdf.compat.js.
add it as a dependency in your app.
var app = angular.module('testApp', [ 'ngPDFViewer' ]);
basic controller syntax useage :
app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope,
pdf) {
$scope.viewer = pdf.Instance("viewer");
$scope.nextPage = function() {
$scope.viewer.nextPage();
};
$scope.prevPage = function() {
$scope.viewer.prevPage();
};
$scope.pageLoaded = function(curPage, totalPages) {
$scope.currentPage = curPage;
$scope.totalPages = totalPages;
};
}]);

Answer 5

you can use pdfmake library to generate the pdf, there is a good example to integrate it to ionic