0

I'm building my VUEJS app which I can see preview of pdf file, and this pdf I get from an API and store it in VUEX. But somehow I can't see the pdf preview

store/index.js

export default new Vuex.Store({
   state: () => ({
     document: null
   )},
   mutations: {
     getDocument(state, document) {
       state.document = document
     }
   },
   actions: {
     async fetchDocument({ commit }) {
       const res = await axios.get('url/test.pdf')
       commit('getDocument', res.data)
     }
   },
   getters: {
     allDocument(state) {
       return state.document
     }
   }
})

PdfPreview.Vue

<template>
  <iframe :src='getPDF' height="680px" width="1108px"></iframe>
</template>
<script>
  computed: {
    ...mapGetters[('allDocument')],
    //not sure with this getPDF func
    getPDF() {
      return this.allDocument
    }
  },
  methods: {
    ...mapActions[('fetchDocument')]
  },

main.js

mounted() {
  this.$store.dispatch('fetchDocument')

how do I approach this? to show pdf in iframe from API through VUEX, I have to fetch it and use VUEX, because it will be used more often, and my boss said so

Killian Pierce
  • 121
  • 3
  • 12
  • 1
    Is there a reason to fetch 'url/test.pdf', couldn't it just be provided as src? – Estus Flask Mar 28 '23 at 17:02
  • yeah I have to use VUEX tho, it will be used it different component more often – Killian Pierce Mar 28 '23 at 17:18
  • 1
    Check what state.document actually is and also how to work with iframe, https://stackoverflow.com/questions/19739001/what-is-the-difference-between-srcdoc-and-src-datatext-html-in-an . Not specific to Vue or Vuex – Estus Flask Mar 28 '23 at 17:22

1 Answers1

0

By <iframe :src='getPDF'... you should provide the URL to the PDF in the scr, not the PDF content data.

I am not sure, if it is a good idea to store whole PDF in the Vuex store. You should better store the link to the PDF. Then it would be easy task.

But if you really want to do it this way, storing the PDF data in the Vues Store, then you will need to create an endpoint, which gives you your PDF file back.

I am not sure you can achieve this with Vue.js in frontend. It could be possibly done with Vue Router. But I would be slow and I suggest you to rethink the design of your dataflow.

Tolbxela
  • 4,767
  • 3
  • 21
  • 42