PDF.JS: PDF rendering using ArrayBuffer or Blob instead of URL

Question

I am aware of a similar question: Pdf.js: rendering a pdf file using the base64 source file instead of the url . Codetoffel answered this question, but my question is different in that my PDF file is retrieved through a RESTful call for my web API implementation. Let me explain ...

Firstly, here is the main way to use PDF.JS to open a PDF file at the URL:

PDFJS.getDocument("/api/path/to/my.pdf").then(function (pdf) { pdf.getPage(1).then(function (page) { var scale = 1; var viewport = page.getViewport(scale); var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; page.render({canvasContext: context, viewport: viewport}); }); }); 

This works fine, but I use Angular and its $resource service to request a PDF through my RESTful Web API. I know that PDF.JS allows me to replace the URL passing as a string in the PDFJS.getDocument method (above) with the DocumentInitParams object that is defined. Using the DocumentInitParams object is as follows:

 var docInitParams = { url: "/api/path/to/my.pdf", httpHeaders: getSecurityHeaders(), //as needed withCredentials: true }; PDFJS.getDocument(docInitParams).then(function (pdf) { ... }); 

This also works, but it works around my Angular $resource , requiring me to build an api url. But this is normal, because PDFJS allows me to directly transfer PDF data, rather than providing a PDF URL as follows:

 var myPdf = myService.$getPdf({ Id: 123 }); //It an Angular $resource, so there is a promise to be fulfilled... myPdf.$promise.then(function() { var docInitParams = { data: myPdf }; PDFJS.getDocument(docInitParams).then(function (pdf) { ... }); }); 

This is the one I can’t work with. I can say that the myService.$gtPdf returns data as blob or as arraybuffer , but it does not work. I tried converting the returned arraybuffer data to a Uint8Array too, but to no avail.

I'm not sure what else to try and really can use a hint.

How to get the data returned from my service for working with PDFJS?

Thanks in advance.

Answer 1

You do not pass the response data to PDF.js, but the resource instance:

 var myPdf = myService.$getPdf({ Id: 123 }); myPdf.$promise.then(function() { var docInitParams = { data: myPdf 

You have not $getPdf your code for $getPdf , but I think it is something equivalent

 var myService = $resource('/foo', {}, {$getPdf:{responseType: 'arraybuffer'}}); var myPdf = myService.$getPdf(); 

By default, the AngularJS $resource function processes the response as an object (deserialized from JSON) and copies any properties from the object to the resource instance ( myPdf in the previous snippet).

Obviously, since your answer is an array buffer (or Blob, a typed array, or something else), this will not work. One way to get the response you transformResponse is to use transformResponse to wrap the response object in the object:

 var myService = $resource('/foo', {}, { $getPdf: { responseType: 'arraybuffer', transformResponse: function(data, headersGetter) { // Stores the ArrayBuffer object in a property called "data" return { data : data }; } } }); var myPdf = myService.$getPdf(); myPdf.$promise.then(function() { var docInitParams = { data: myPdf.data }; PDFJS.getDocument(docInitParams).then(function (pdf) { // ... }); }); 

Or simply the following (avoid unnecessary local variables):

 myService.$getPdf().$promise.then(function(myPdf) { PDFJS.getDocument({ data: myPdf.data }).then(function (pdf) { // ... }); });