How do you load vue-pdf with data from an API Call?

[BrettBailey]

I'm loading my pdf data from an API call via axios and need to get the response data into pdf viewer. I've tried a number of approaches and non have worked so far. Heres my source code.

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

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

export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfsrc: null
    };
  },
  created() {
    return axios
      .get(`${process.env.VUE_APP_API_INTRANET}/pdf`, {
        responseType: "application/pdf"
      })
      .then(response => {
        console.log("Success", response);

        // this.pdfsrc = new Blob([response.data]);

        //this.pdfsrc = response.data;

        //  this.pdfsrc = new Uint8Array(response.data);

      })
      .catch(console.error); //
  }
};
</script>

I've also posted a question on stack overflow here: https://stackoverflow.com/q/65255649/428280

[BrettBailey]

Hi

I've managed to get this working myself with a bit of help from stack overflow:

https://stackoverflow.com/q/65255649/428280 https://stackoverflow.com/q/65291853/428280

I would be happy to tidy up my working example and add it to your readme via a pull request if that is something you might accept?

~Brett

[japr8985]

If the url you are calling shows the pdf directly, you don't need to make an asynchronous call.

Better take this as a guide, it worked wonders for me

<template>
    <div>
        <pdf :src="src"></pdf>
     </div>
</template>
import pdf from 'vue-pdf'
export default {
    components: {
        pdf
    },
   data: () => ({
        src: ''
    })
...
created() {
        this.src = pdf.createLoadingTask(YOUR_URL)
    },
...
}

From there you can continue implementing according to the documentation dictates