Vue3 Display PDF Document

Question

I can grab images and display them in a browser using them as a bytearray without any problem. In Normal C# I was also able to do this with PDFs very easily by inserting this bytearray as an but now in Vue3 I am having troubles doing this same thing I've done in the past. What is a simple way to display a PDF document In browser with Vuejs?

This is how I've done in in the past, I am open to suggestions and a better way to do this. This will be hosted and be shown on a big screen TV so the department can view the document and it will flash to other ones as well.

     <div v-if="byteArrayPDF" class="content">
        <object data="byteArrayPDF" type="application/pdf" style="height:700px;width:1100px;"></object>
        </div>
    </div>

</template>
<script lang="js">
    import Vue from 'vue';

    export default Vue.extend({
        data() {
            return {
                loading: false,
                byteArrayPDF: null
            };
        },
        created() {
            this.fetchByteArray();
        },
        methods: {
            fetchByteArray() {
                this.byteArrayPDF = true;
                this.loading = null;
                
            fetch('https://localhost:5001/api/Doc/Virtual-Visual-Service-2020.pdf')
                    .then(response => response.json())
                    .then(bytespdf => {
                        this.byteArrayPDF = "data:application/pdf;base64," + bytespdf;
                        this.loading = false;
                        return;
                    })
                    .catch(console.log("Error PDF View"));
            }

you're mixing up your assignments at the start of fetchByteArray() , set loading to true not byteArrayPDF , would also help to set loading to false in finally() instead of then() - if an error is thrown the loading won't reset, should find a solution or at least some help here https://stackoverflow.com/q/28197179/12476007 — Multi, Dec 09 '22 at 15:42

score 0 · Answer 1 · answered Dec 09 '22 at 17:36

From what you said in your question, I think you want to load a pdf file in for example a "vue component". If that is right, you can use a code like the code below:

<template>

  <div v-if="byteArrayPDF">
    <iframe :src="srcData" width="100%" height="500px">
    </iframe>
  </div>
  <div v-else>
    loading...
  </div>

</template>

<script>
export default {
  name: "CompoPdf",
  data() {
    return {
      srcData: null,
      byteArrayPDF: false,
    }
  },
  created() {
    this.fetchByteArray();
  },
  methods: {

    fetchByteArray: async function () {
      // to see the "loading..." effect, I intentionally add a "setTimeout" code. that loads the pdf after "3s". You can remove it in your real app.
      await new Promise(resolve => setTimeout(resolve, 3000));
      fetch('https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf')
          .then(response => {
            console.log(response);
            // for this case "response.url" is what we need, but if you fetch data for example from a database ... you may need "response.json()" or other codes;
            this.srcData = response.url;
            this.byteArrayPDF = true;
          })
    }
  }
}
</script>

<style scoped>

</style>

I also suggest that you read more about fetch API and CORS if you are not familiar with that topics, to better manage your request to the url you want.

Vue3 Display PDF Document

1 Answers1