allowed for data URIs in the src of the pdf viewer for dynamic pdf viewing

[michaschwab]

with this patch, it's possible to use ng-pdfviewer interactively by changing the source of the dom element to different data uris. we can use the dom element like this:

<pdfviewer ng-src="{{pdfContent}}" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>

and then feed the data uri into pdfContent. that even allows to use a user selected pdf file to be displayed immediately, using html5 filereader:

$scope.pdfUpload = function(input)
{
    var reader = new FileReader();
    reader.onloadend = function () {
        var data = this.result;
        $scope.$apply(function () { $scope.pdfContent = $sce.trustAsResourceUrl(data); });
    };
    reader.readAsDataURL(input.files[0]);
};

with

<input type="file" id="file" name="file" ng-model="pdfFile"
    onchange="angular.element(this).scope().pdfUpload(this)" />

[michaschwab]

related to http://stackoverflow.com/questions/12092633/pdf-js-rendering-a-pdf-file-using-a-base64-file-source-instead-of-url and took code from https://gist.github.com/borismus/1032746

[geyang]

ha, I was just about to implement this myself. Thanks a lot!

[geyang]

@akrennmair this pull request is very good, I think it will make quite a few people happy.

I am trying to test this one out in development right now.

[grane22]

I am getting raw pdf data from the $http (angular service) as a string. I wanted to know how may I use this code to modify the src of the viewer according to my input pdf data. Any ideas?
The sample raw pdf looks like this "%PDF-1.4↵%����↵4 0 obj↵<</DecodeParms<</Colors 3/Predictor 15/...."

[marchrius]

Any changes for @grane22 problem? I'm in the same condition and I don't know how to..

[grane22]

@marchrius You should try looking at this post. http://stackoverflow.com/questions/33287993/rendering-raw-pdf-data-from-web-service-using-pdf-js-specify-src-in-angular-io.

I found the comment useful. So instead of getting the data as dataURI, I am getting the data from the server as arraybuffer by setting the response type like this.
$scope.requestConfig = {
method: 'GET',
url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/material-design-2.pdf",
responseType: 'arraybuffer'
};

Then i just convert the response data to Uint8Array by doing this
var uInt8Array = new Uint8Array(data);

You can use this uInt8Array in pdf.js as follows:

PDFJS.getDocument({data: uInt8Array}).then(function(pdf){
pdf.getPage(1).then(function(page) {
// you can now use page here
// Your code here.
});
});

Let me know if you need any help on this!

[marchrius]

@grane22 Thanks very much! I'm stuck at PDFJS.getDocument({data: uInt8Array}).then(function(pdf){ pdf.getPage(1).then(function(page) { // you can now use page here // Your code here. }); });

I need to use it in ng-pdfviewer and not in pdf.js.

[grane22]

@marchrius I am trying to figure that out too. It shouldn't be that hard i guess. I will let you know once this works in ng-pdfviewer

[marchrius]

Hi @grane22 thanks.

I'm forking this repo to apply my actual mod.

[marchrius]

Sorry for doubling,

@grane22 hi, this is my version with base64 encoded string. #30

[michaschwab]

hi there!
it's great that you're forking from this branch and improving it further. we should work together more to make sure we don't lose our additions to this plugin.

@grane22 and @marchrius: i'm not sure what the problem is. what's wrong with something like this:

PDFJS.getDocument({data: uInt8Array}, null, null, $scope.documentProgress).then(function(_pdfDoc) {
    $scope.pdfDoc = _pdfDoc;
    $scope.renderPage($scope.pageNum, function(success) {
        if ($scope.loadProgress) {
            $scope.loadProgress({state: "finished", loaded: 0, total: 0});
        }
    });
}, function() { /* ... */ });

in case this works for you guys i can suggest a patch that will allow this method, the dataURI, and the original path version to work simultaneously.

[marchrius]

@michaschwab the problem (my problem) is:
I have a directive DocumentViewer that have the buttons to navigate througth the pages, pages info, load the pdf (it's served via REST API so I haven't the link to the file). In this directive is present the ng-pdfviewer directive to show the document. I've implemented the plugin in this way:

<pdfviewer data-base64="{{base64encoded}}" on-page-load="pageLoaded(page,total)"
id="pdfViewer" load-progress="loadProgress(loaded, total, state)"
class="ng-isolate-scope"></pdfviewer>

This becouse the downloads is made by DocumentViewer (and this is correct IMHO) and the redering by the ng-pdfviewer..

Also, this

PDFJS.getDocument({data: uInt8Array}, null, null, $scope.documentProgress)
    .then(function(_pdfDoc) { ...

is the same as (in terms of final results) to this

PDFJS.getDocument(uInt8Array)
    .then(function(_pdfDoc) { ... 

becouse the file is immediately loaded.
Keep in mind that the "data-base64" can be merged with "src" and then a check can determine the type of the variable (http://... or data:application/pdf;base64,..."
I hope I was clear enough.

[michaschwab]

Thanks, that was pretty clear! But I still don't see the problem, even though I know what you're trying to do.
Does it render for you? Does your approach work, or is there a problem with that? Or are you trying to figure out how to merge your approach with the other ways of getting the data such as http and data?

[khaledbouguerra]

hey guys , do I need to repleace the code from the ng-pdfviewer with this code ?

[LokeshBoran]

Please merge this, its working perfectly fine.

[juanmacaballeror]

Hi @grane22 ,
I have a question for @grane22 . I'm sticking with pdf.js in base64 but I'm lost.
I see that this thread is a while but I am desperate to see if you can help me.
I have an API in angularjs with the following;
html

**controller;**

var module = angular.module ("myModule", []);
module.controller ("myController", function ($ scope) {
var pdfData = atob ('JVBERi0xLjMKJf //// 8KMSAwIG9iago8PCAvQ3JlYXRvciA8ZmVmZjAwNTAw .........');
var length = pdfData.length;
var arrayBuffer = new ArrayBuffer (length);
var uintArray = new Uint8Array (arrayBuffer);

  for (let i = 0; i <length; i ++) {
   uintArray [i] = pdfData.charCodeAt (i);
  }
$ scope.test = uintArray;

});
You can see it at https://jsfiddle.net/z7swdkjm/55/

When I lift the server it only paints me the pdfjs-viewer viewer without the data but if I refresh the screen by pressing F5 it works for me.
Do you know how to load the data in base64 using the pdfjs-viewer directive? all the examples that I see with base64 is with canvas and I want to use the viewer.
Thanck you so much

[juanmacaballeror]

Sorry, the html code

controller;

[gauravrane2212]

@juanmacaballeror Are you getting the raw PDF data from an HTTP request or are you hardcoding it? It is strictly advisable to get it from the server as base64 response and pass it directly as in this library example https://github.com/legalthings/angular-pdfjs-viewer#data

In your code you just have to change this

<pdfjs-viewer data="{{prueba}}" download="false" print="false"> 
       </pdfjs-viewer>

to

<pdfjs-viewer data="prueba" download="false" print="false"> 
       </pdfjs-viewer>

Notice no moustache brackets while referencing the scope var in data prop

[juanmacaballeror]

Hello Gaurav Rane, First of all thank you very much for answering after so long. The base64 code in this example I have copied for a test but for my project I will get it through a service that will return the value in BASE64 so what I understand that I can not use the service $ http.get because the response $ http.get ("http://example.com/file.pdf", { responseType: 'arraybuffer' }). then (function (response) { $ scope.data = new Uint8Array (response.data); }); Is that so? what I do not understand, is that as I have the code, it does not render the pdf when I start the server but if I press f5 it already renders the pdf. You can see my project in;https://gitlab.com/JuanmaCaballero/pdfJsViewer.git Without calling the service $ http.get you can not render the pdf ?? Thank you very much again and if you need anything from Madrid (Spain), do not hesitate ... a greeting El mar., 24 jul. 2018 a las 19:58, Gaurav Rane (<[email protected]>) escribió:

…

@juanmacaballeror <https://github.com/juanmacaballeror> Are you getting the raw PDF data from an HTTP request or are you hardcoding it? It is strictly advisable to get it from the server as base64 response and pass it directly as in this library example https://github.com/legalthings/angular-pdfjs-viewer#data In your code you just have to change this <pdfjs-viewer data="{{prueba}}" download="false" print="false"> </pdfjs-viewer> to <pdfjs-viewer data="prueba" download="false" print="false"> </pdfjs-viewer> *Notice no moustache brackets while referencing the scope var in data prop* — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#15 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJmLAMYPx5YovvEGbZjnqxZRm0AYz4VIks5uJ2AxgaJpZM4Ctstw> .