如何通过VUEX在iframe中加载和预览pdf文件

Question

我正在构建我的 VUEJS 应用程序，我可以看到 pdf 文件的预览，这个 pdf 我从 API 获得并将其存储在 VUEX 中。但是不知何故我看不到pdf预览

商店/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')

我该如何处理？要通过 VUEX 从 API 在 iframe 中显示 pdf，我必须获取它并使用 VUEX，因为它会被更频繁地使用，我的老板也是这样说的

Answer 1

通过

<iframe :src='getPDF'...

，您应该在scr中提供PDF的

URL

，而不是PDFcontent数据。

我不确定将整个 PDF 存储在 Vuex 存储中是否是个好主意。您最好存储指向 PDF 的链接。那么这将是一件容易的事。

但是如果你真的想这样做，将 PDF 数据存储在 Vues 商店中，那么你将需要创建一个端点，它会返回你的 PDF 文件。

我不确定你能否在前端使用 Vue.js 实现这一点。它可以用 Vue Router 来完成。但我会很慢，我建议你重新考虑你的数据流的设计。