Is binary supported?

We have an API endpoint that returns us the binary file ('content-type': 'binary/octet-stream') of a PDF. However, when I pass the blob response to the component, several different errors are displayed on the developer’s console:

Error: Invalid XRef stream header
pdf.worker.js:355     at error (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:1256:17)
    at XRef_readXRef [as readXRef] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:22222:29)
    at XRef_parse [as parse] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:21892:28)
    at PDFDocument_setup [as setup] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:30797:17)
    at PDFDocument_parse [as parse] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:30686:12)
    at http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:40459:28
    at Promise (<anonymous>)
    at LocalPdfManager_ensure [as ensure] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:40454:14)
    at LocalPdfManager.BasePdfManager_ensureDoc [as ensureDoc] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:40406:19)

pdf.worker.js:346 Warning: Indexing all PDF objects

pdf.worker.js:354 Error: Bad FCHECK in flate stream: 120, 253
pdf.worker.js:355     at error (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:1256:17)
    at FlateStream (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:2870:23)
    at Parser_makeFilter [as makeFilter] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:5734:18)
    at Parser_filter [as filter] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:5701:21)
    at Parser_makeStream [as makeStream] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:5690:21)
    at Parser_getObj [as getObj] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:5358:47)
    at XRef_fetchUncompressed [as fetchUncompressed] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:22309:28)
    at XRef_fetch [as fetch] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:22272:26)
    at XRef_fetchIfRef [as fetchIfRef] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:22255:19)

pdf.worker.js:346 Warning: Invalid stream: "Error: Bad FCHECK in flate stream: 120, 253"

The template is very simple:

<template>
  <pdf v-bind:src="report" />
</template>

<script>
  import axios from 'axios';
  import pdf from 'vue-pdf';

  const api = axios.create({
    baseURL: `https://api.ourdomain.com/v1`,
    responseType: 'blob'
  });

  export default {
    components: {
      pdf
    },
    async asyncData(ctx) {
      const {params: {id}, query: {uid, rid}} = ctx;

      let url = `/report/${id}`;
      const params = {
        media: 'pdf',
        uid, rid
      };

      const blob = await api.get(url, {params}).then(response => {
        return {data: response.data};
      });

      return {
        report: blob
      }
    }
  }
</script>

Pretty sure I’m missing something.

[FranckFreiburger]

@betacar here is a complete example:

<template>
  <pdf :src="pdfSrc"></pdf>
</template>

<script>
import vuePdf from 'vue-pdf'

// since vue-pdf may be used server-side (see vuejs ssr)
// converts base64 string into binary data as a javascript string
var base64ToString = process.env.VUE_ENV === 'server' ? function(base64) { return Buffer.from(base64, 'base64').toString() } : window.atob;

// get the binary version of the pdf
var binaryVersionOfThePdf = base64ToString('JVBERi0xLjUKJbXtrvsKMyAwIG9iago8PCAvTGVuZ3RoIDQgMCBSCiAgIC9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQp4nE2NuwoCQQxF+/mK+wMbk5lkHl+wIFislmIhPhYEi10Lf9/MVgZCAufmZAkMppJ6+ZLUuFWsM3ZXxvzpFNaMYjEriqpCtbZSBOsDzw0zjqPHZYtTrEmz4eto7/0K54t7GfegOGCBbBdDH3+y2zsMsVERc9SoRkXORqKGJupS6/9OmMIUfgypJL4KZW5kc3RyZWFtCmVuZG9iago0IDAgb2JqCiAgIDEzOAplbmRvYmoKMiAwIG9iago8PAogICAvRXh0R1N0YXRlIDw8CiAgICAgIC9hMCA8PCAvQ0EgMC42MTE5ODcgL2NhIDAuNjExOTg3ID4+CiAgICAgIC9hMSA8PCAvQ0EgMSAvY2EgMSA+PgogICA+Pgo+PgplbmRvYmoKNSAwIG9iago8PCAvVHlwZSAvUGFnZQogICAvUGFyZW50IDEgMCBSCiAgIC9NZWRpYUJveCBbIDAgMCA1OTUuMjc1NTc0IDg0MS44ODk3NzEgXQogICAvQ29udGVudHMgMyAwIFIKICAgL0dyb3VwIDw8CiAgICAgIC9UeXBlIC9Hcm91cAogICAgICAvUyAvVHJhbnNwYXJlbmN5CiAgICAgIC9DUyAvRGV2aWNlUkdCCiAgID4+CiAgIC9SZXNvdXJjZXMgMiAwIFIKPj4KZW5kb2JqCjEgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzCiAgIC9LaWRzIFsgNSAwIFIgXQogICAvQ291bnQgMQo+PgplbmRvYmoKNiAwIG9iago8PCAvQ3JlYXRvciAoY2Fpcm8gMS4xMS4yIChodHRwOi8vY2Fpcm9ncmFwaGljcy5vcmcpKQogICAvUHJvZHVjZXIgKGNhaXJvIDEuMTEuMiAoaHR0cDovL2NhaXJvZ3JhcGhpY3Mub3JnKSkKPj4KZW5kb2JqCjcgMCBvYmoKPDwgL1R5cGUgL0NhdGFsb2cKICAgL1BhZ2VzIDEgMCBSCj4+CmVuZG9iagp4cmVmCjAgOAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDA1ODAgMDAwMDAgbiAKMDAwMDAwMDI1MiAwMDAwMCBuIAowMDAwMDAwMDE1IDAwMDAwIG4gCjAwMDAwMDAyMzAgMDAwMDAgbiAKMDAwMDAwMDM2NiAwMDAwMCBuIAowMDAwMDAwNjQ1IDAwMDAwIG4gCjAwMDAwMDA3NzIgMDAwMDAgbiAKdHJhaWxlcgo8PCAvU2l6ZSA4CiAgIC9Sb290IDcgMCBSCiAgIC9JbmZvIDYgMCBSCj4+CnN0YXJ0eHJlZgo4MjQKJSVFT0YK');

export default {
	components: {
		'pdf': vuePdf,
	},
	data() {
		return {
			// since vue-pdf use PDFJS.getDocument(), we can do:
			pdfSrc: { data: binaryVersionOfThePdf }
		}
	}
}
</script>

[FranckFreiburger]

v3.0.1 is the latest version available on npm