如何通过Vuex在iframe中加载并预览PDF文件

你的问题核心是两个关键错误导致的：

• axios默认会把PDF响应解析成文本格式，存到Vuex里的是乱码内容，不是可用的PDF二进制数据
• iframe的src无法直接识别原始响应数据，必须转换成浏览器能解析的Blob URL

下面是具体修复方案和代码：

1. 修改axios请求，获取Blob格式的PDF #

在Vuex的action中添加responseType: 'blob'配置，让axios直接返回PDF的二进制Blob对象，避免文本解析导致的乱码：

// store/index.js
export default new Vuex.Store({
  state: () => ({
    documentBlob: null // 改为存储Blob对象
  }),
  mutations: {
    SET_DOCUMENT_BLOB(state, blob) {
      state.documentBlob = blob
    }
  },
  actions: {
    async fetchDocument({ commit }) {
      const res = await axios.get('url/test.pdf', {
        responseType: 'blob' // 关键配置：指定响应类型为Blob
      })
      commit('SET_DOCUMENT_BLOB', res.data)
    }
  },
  getters: {
    documentBlob: state => state.documentBlob
  }
})

2. 组件中生成Blob URL并渲染iframe #

在预览组件里，把Vuex中的Blob对象转换成浏览器可识别的临时URL，作为iframe的src。同时要在组件销毁时释放这个URL，避免内存泄漏：

<template>
  <iframe v-if="pdfUrl" :src="pdfUrl" height="680px" width="1108px"></iframe>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  mounted() {
    // 触发PDF获取动作
    this.fetchDocument()
  },
  computed: {
    ...mapGetters(['documentBlob']),
    pdfUrl() {
      // 有Blob对象时生成对应的临时URL
      if (this.documentBlob) {
        return URL.createObjectURL(this.documentBlob)
      }
      return null
    }
  },
  methods: {
    ...mapActions(['fetchDocument'])
  },
  beforeDestroy() {
    // 组件销毁时释放临时URL，防止内存泄漏
    if (this.documentBlob) {
      URL.revokeObjectURL(this.pdfUrl)
    }
  }
}
</script>

方案说明 #

• responseType: 'blob'确保axios返回的是完整的PDF二进制数据，而非乱码文本
• URL.createObjectURL()将Blob转换为浏览器可识别的本地临时URL，让iframe能正常加载预览
• 调用URL.revokeObjectURL()释放资源是必要操作，避免临时URL长期占用浏览器内存

内容的提问来源于stack exchange，提问作者Killian Pierce