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

Improve this question
3
  • 1
    Is there a reason to fetch 'url/test.pdf', couldn't it just be provided as src? Commented Mar 28, 2023 at 17:02
  • yeah I have to use VUEX tho, it will be used it different component more often Commented Mar 28, 2023 at 17:18
  • 1
    Check what state.document actually is and also how to work with iframe, stackoverflow.com/questions/19739001/… . Not specific to Vue or Vuex Commented Mar 28, 2023 at 17:22

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

yeah I know, I have to use VUEX tho, it will be used it different component more often, and my boss said so

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.