i am trying to add a token authorization to pdf-viewer because i have an api to get file, but this api require pass a token authorization when send request, how can i do it?
Thanks.

I got bug like this :

Warning: Unhandled rejection: TypeError: Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined
at Object.onResolve (http://localhost:8080/ng-pdfviewer-develop/example/ng-pdfviewer.js:60:69)
at Object.ea.runHandlers (http://localhost:8080/ng-pdfviewer-develop/example/pdf.js:20:252)

Once I just run the example page.
So, this bug comes from file ng-pdfviewer.js line 60 that called .render().promise.then
This problem is affected to PDF finish loaded state. I cannot track for PDF loaded state if it finish(Because it error and it stuck in ng-pdfviewer.js).
I just remove .promise and it's worked for me so that I can track if PDF loaded.

Please fix this.
Thank you

When I'm trying to use ng-pdfviewer in my ionic app it will work perfectly for a standard pdf in a normal page. However, when I use it on "sub pages" (not sure if this is the correct word for what I'm talking about, it's the pages you get when you use href="#/app/search/{{pdf.id}}") it breaks all the links going to the subpage. I've specifically narrowed the problem down to the pdf.Instance. When you comment out the first line the pdf obviously doesn't work correctly, but the links start working correctly again. The error I'm receiving is: Error: undefined is not an object (evaluating 'pdf.Instance')

For whatever reason LoadProgress is not triggering a digest and a manual $scope.$apply is being required to get the UI to update with the new load progress.

Is it applicable to make the src URL value not seen or show the file using its binary to prevent download it and prevent showing its URL when inspecting the page.

I notice you do store the zoom scale in scope. Any plans to expose that to allow Zoom tools?

Hello,

What is involved in having printing the pdf

Evan

Hi,

we are not able to view the multipage tiff files using ng-pdfviewer.
dose this one only works for pdf and not for Tiff files in angular js?
Can you please suggest how to display multipage tiff files in angular js?

Canvas size is not 100% it's container, causing visual errors. It is not resizing neither, which is absolutely not responsive...

I'm trying to convert original viewer.js into an angularjs service, but I'm not too experienced with Angular... The far I went is allowing blobs to being rendered instead of only pdf url, removing the SRC attribute of the directive and injecting directly inside my controller...

Any clues on this? It would be cool to make mousewheel and that available too, because ng-pdfviewer is too simple and no browser friendly at all....

My controller code is ::

venueApp.controller('venueController',['$scope',PDFViewerService',function($scope,pdf){
   $scope.viewer = pdf.Instance("viewer");
   $scope.pageLoaded = function(curPage, totalPages) {
     $scope.currentPage = curPage;
     $scope.totalPages = totalPages;
   };
   $scope.nextPage = function() {
     $scope.viewer.nextPage();
   };

   $scope.prevPage = function() {
      $scope.viewer.prevPage();
   };
}]);

and my html code is ::

<a id="image_{[ menu.id ]}" ng-if="menu.filename.indexOf('.pdf') > -1">
  <button ng-click="prevPage()">&lt;</button>
  <button ng-click="nextPage()">&gt;</button>
  <br>
  <span>{[currentPage]}/{[totalPages]}</span>
  <br>
  <pdfviewer src="{[menu.menu_url]}" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
</a>

I am using {[]} for expression evalutaion because i configured it to . Now in my console , the plugin is outputting the correct messages i guess

Printed in console by this plugin

src attribute changed, new value is https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf

loadPDF https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf

Warning: Deprecated API usage: getDocument is called with pdfDataRangeTransport, passwordCallback or progressCallback argument -- printed by pdf.js

But the pdf is not being painted . My DOM element for the padf viewer tag is ::

<pdfviewer src="https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf" on-page-load="pageLoaded(page,total)" id="viewer" class="ng-isolate-scope"><canvas></canvas></pdfviewer>

I dont understand what is the issue . Maybe it is with the pdf file as chrome also does not display it , instead just downloads it . the link for the sample pdf is ::

https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf

P.S it is not my CV , just took one from the pool of applicants in our company :P

Not exactly related to this product but... (fingers crossed) wondering if anyone else has experienced issues with chrome downloading a pdf. It seems to ignore the byte-range chunking which it should respect from the http headers...

Hi,

I have a need of rotating page in clockwise & anti-clockwise directions. Can anyone help me to do?

Anyway, Thank you so much for this directive..

Hi,

I have been trying to show the PDF on mobile app from local folder of Ionic, finally I landed here. I can now display the PDF file inside the app, but I am unable to read the complete PDF file, half of the area can not be viewed. Maybe due to responsiveness is not handled by pdfviewer tag.

It would be appreciated any kind of help

Thanks.

Even though it's a pretty straightforward library, a working example on jsfiddle or plunkr would be cool!

ReferenceError: Can't find variable: window on this line: https://www.dropbox.com/s/grive12e7txk94v/Screenshot%202014-05-26%2015.20.04.png

It's "angular": "~1.2.5",.

does the library require a specific angular version?

I'm getting this error:
Unknown provider: pdfProvider <- pdf <- ProductCtrl

Is there a way to set this up without the array in the controller?

You have:

.controller('CaseCtrl', ['$scope','PDFViewerService', function ($scope, pdf ) {

I'd prefer to use:

.controller('CaseCtrl', function ($scope, pdf ) {

Mainly because I'm injecting a bunch of other stuff and don't know all the declarations for them on the array side of things.

When I render one pdf some of the pages are rendered upside-down and some are fine. When i go back to the upside-down again, it renders fine. very irregular behaviour.

I was comparing the libraries and the pdf.js file you have in the repo is very diferent from the mozilla pdf.js, I wonder what changes did you made to the library in your repo or if is a different implementation.

The pdf.compat library is the result of that process, it's your union or other sources.

In that place you use the configuarcion workersrc of the library pdf.js mozilla.

Why do not you use the pdf library originals?.

thanks for your time

I use Gulp to aggregate/minify all vendor scripts and get vendor.min.js loaded on page. pdf.js is trying to look for vendor.min.worker.js(which will obviously not exisitng), why is the worker file name gets created automatically?

Hello,

I am trying to use this directive with my project but I am not able to view the file because I am always getting this exception Unexpected server response (0) while retrieving PDF "url"

Does anyone knows what it could be he cause of this?

Ps the server is Apache Tomcat and I have enabled cors origin filter.

Any help would be very appreciated

Best Regargs

Hi akrennmair,
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,
N.Murali Krishna.

If I create 2 or more pdfs the end result will be, a concatenated pdf.
I'm using the pdfviewer, to allow the user to view and then download, however, downloading is grand because it's a different logic, but viewing what it happens is that files get concatenated.

So, if the first pdf have 3 pages, and the second pdf have 8 pages, the user first see an unrelated pdf, before he can actually see the intended pdf.

Any suggestion how I can clear the pdfviewer buffer??

Thanks

Hi there,

I'm trying to show a pdf file (using ng-pdfviewer) in my AngularJS app, but I have many problems...
The most important is that when i run the app in my local environment everything works fine, the pdf is rendered properly, but when i run "grunt build" (as I run in the "prod" server), the same pdf is not rendered.

Furthermore, in my local environment, i can see many "console.logs()" corresponding to the process to load and render the file. When I compile the app, i can just see the load pdf "console.log", the one which corresponds to the render process have been missed.

Has anyone had the same issues?

It would be appreciated any kind of help

Thanks.

In the below code:

page.render({ canvasContext: ctx, viewport: viewport }).then(
                        function() { 
                            if (callback) {
                                callback(true);
                            }
                            $scope.$apply(function() {
                                $scope.onPageLoad({ page: $scope.pageNum, total: $scope.pdfDoc.numPages });
                            });
                        }, 
                        function() {
                            if (callback) {
                                callback(false);
                            }
                            console.log('page.render failed');
                        }
                    );

It should be

page.render({ canvasContext: ctx, viewport: viewport }).promise.then(
...

As page.render() return a defer object.

would you please add package.json so that we can add your lib in https://cdnjs.com.
thank you very much!
cdnjs/cdnjs#5020

My pdf comes in as a byte array. I'm trying to show it using your viewer. My Controller code:

lwsService.getdocument(id) .success(function (response) { var fileName = response[0].FileName; var fileImage = base64ArrayBuffer(response[0].binFileImage); var fileURL = new Blob([fileImage], { type: 'application/pdf' }); $scope.pdfURL = URL.createObjectURL(fileURL);

The code to convert the byte array is:

` function base64ArrayBuffer(arrayBuffer) {
var base64 = ''
var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'

    var bytes = new Uint8Array(arrayBuffer)
    var byteLength = bytes.byteLength
    var byteRemainder = byteLength % 3
    var mainLength = byteLength - byteRemainder

    var a, b, c, d
    var chunk

    // Main loop deals with bytes in chunks of 3
    for (var i = 0; i < mainLength; i = i + 3) {
        // Combine the three bytes into a single integer
        chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]

        // Use bitmasks to extract 6-bit segments from the triplet
        a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18
        b = (chunk & 258048) >> 12 // 258048   = (2^6 - 1) << 12
        c = (chunk & 4032) >> 6 // 4032     = (2^6 - 1) << 6
        d = chunk & 63               // 63       = 2^6 - 1

        // Convert the raw binary segments to the appropriate ASCII encoding
        base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
    }

    // Deal with the remaining bytes and padding
    if (byteRemainder == 1) {
        chunk = bytes[mainLength]

        a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2

        // Set the 4 least significant bits to zero
        b = (chunk & 3) << 4 // 3   = 2^2 - 1

        base64 += encodings[a] + encodings[b] + '=='
    } else if (byteRemainder == 2) {
        chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]

        a = (chunk & 64512) >> 10 // 64512 = (2^6 - 1) << 10
        b = (chunk & 1008) >> 4 // 1008  = (2^6 - 1) << 4

        // Set the 2 least significant bits to zero
        c = (chunk & 15) << 2 // 15    = 2^4 - 1

        base64 += encodings[a] + encodings[b] + encodings[c] + '='
    }

    return base64
}`

My HTML is:

<pdfviewer src="{{pdfURL}}" on-page-load='pageLoaded(page,total)' id="viewer" load-progress='loadProgress(loaded, total, state)'></pdfviewer>

Nothing displays.

With:

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

app.controller('PdfController', [ '$scope', 'PDFViewerService', function($scope, pdf) {
    console.log('PdfController: new instance');

    $scope.instance = pdf.Instance("viewer");

    $scope.nextPage = function() {
        $scope.instance.nextPage();
    };

    $scope.prevPage = function() {
        $scope.instance.prevPage();
    };

    $scope.gotoPage = function(page) {
        $scope.instance.gotoPage(page);
    };

    $scope.pageLoaded = function(curPage, totalPages) {
        $scope.currentPage = curPage;
        $scope.totalPages = totalPages;
    };

    $scope.loadProgress = function(loaded, total, state) {
        console.log('loaded =', loaded, 'total =', total, 'state =', state);
    };
}]);

is there a way to print all pages?