javascript - PDF.JS: Render PDF using an ArrayBuffer or Blob instead of URL -

javascript - PDF.JS: Render PDF using an ArrayBuffer or Blob instead of URL -

i know of similar question one: pdf.js: rendering pdf file using base64 file source instead of url. question awesomely answered codetoffel question different in pdf retrieved via restful phone call web api implementation. allow me explain...

first, here's basic way utilize pdf.js open pdf via 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 great, using angular , $resource service create request pdf via restful web api. know pdf.js allows me replace passing url string in pdfjs.getdocument method (above) documentinitparams object, defined here. using documentinitparams object works follows:

var docinitparams = { url: "/api/path/to/my.pdf", httpheaders: getsecurityheaders(), //as needed withcredentials: true }; pdfjs.getdocument(docinitparams).then(function (pdf) { ... });

this works, works around angular $resource requiring me build api url. that's ok because pdfjs allows me give pdf info directly, instead of giving url pdf, follows:

var mypdf = myservice.$getpdf({ id: 123 }); //it's angular $resource, there promise fulfilled... mypdf.$promise.then(function() { var docinitparams = { data: mypdf }; pdfjs.getdocument(docinitparams).then(function (pdf) { ... }); });

this 1 can't seem work. can tell myservice.$gtpdf method homecoming info blob or arraybuffer neither works. i've tried convert arraybuffer returned info uint8array too, no avail.

i'm not sure else seek , utilize tip.

how info returned service work pdfjs?

thanks in advance.

you're not passing response info pdf.js, instance of resource:

class="lang-js prettyprint-override">var mypdf = myservice.$getpdf({ id: 123 }); mypdf.$promise.then(function() { var docinitparams = { data: mypdf

you haven't shown code $getpdf, guess equivalent to

class="lang-js prettyprint-override">var myservice = $resource('/foo', {}, {$getpdf:{responsetype: 'arraybuffer'}}); var mypdf = myservice.$getpdf();

by default, angularjs $resource treats response object (deserialized json) , copies properties object resource instance (mypdf in previous snippet).

obviously, since response array buffer (or blob, typed array or whatever), not going work. 1 of ways desired response utilize transformresponse wrap response object in object:

class="lang-js prettyprint-override">var myservice = $resource('/foo', {}, { $getpdf: { responsetype: 'arraybuffer', transformresponse: function(data, headersgetter) { // stores arraybuffer object in property called "data" homecoming { info : info }; } } }); var mypdf = myservice.$getpdf(); mypdf.$promise.then(function() { var docinitparams = { data: mypdf.data }; pdfjs.getdocument(docinitparams).then(function (pdf) { // ... }); });

or next (avoided unnecessary local variables):

class="lang-js prettyprint-override">myservice.$getpdf().$promise.then(function(mypdf) { pdfjs.getdocument({ data: mypdf.data }).then(function (pdf) { // ... }); });

javascript angularjs rest angular-resource pdf.js