Search code examples
pdfvuejs2axiospdf-viewerpdf.js

How to consume an octet stream from protected endpoint using vue-pdf a vuejs implementation of pdfjs

I want to use the vue-pdf library that is an implementation of pdfjs for vuejs 2.x in order to do the following

  • Download a PDF from an oauth2 protected endpoint using axios
  • Render the PDF (octet-stream) using vue-pdf library

and the tricky parts are

  • Access protected resources
  • Render PDF that comes as octet stream

Currently there are no examples in the repo to show case these.

Solution

  • After fiddling around with the library, I managed to do achieve the rendering of a pdf from a protected endpoint using the following approach

    1. Make an axios ajax request for the protected resource using necessary auth header and the response type as responseType: 'blob'
    2. Magically create a URL from the downloaded blob object
    3. Set the blob URL in a data variable that is then used by <pdf> component

    I have created a Pull Request to the vue-pdf repository with a working example. In the PR replace the URL of axios request with a REST endpoint that returns an octet-stream and you should be all good.

    The resulting pdf viewer shown below

    enter image description here