前端使用 iframe 实现 PDF 文件预览与常见问题排查

作者：阿沐时间：2026-10-30 23:47:09浏览：571

本文详解如何利用 iframe 标签在前端实现 PDF 文件的在线预览，涵盖本地静态文档与后端文件流两种场景。重点解析通过 XMLHttpRequest 获取 Blob 数据并生成 Object URL 的核心逻辑，提供完整 Vue 代码示例，并针对 createObjectURL 读取错误等常见报错提供排查方案。

本文重点讲解如何利用 iframe 标签实现 PDF 文件的在线预览功能，并针对预览过程中可能出现的报错及文档加载失败等问题进行排查分析。

通过 iframe 实现的预览功能通常具备原生支持的分页浏览、文件下载、页面旋转以及缩放比例调整等实用特性。

一、iframe 是什么

iframe 的主要作用是将 src 属性指定的资源内容嵌入到当前 HTML 页面中显示。

该技术既适用于预览本地 static 目录下的静态文档，也能用于展示后端接口返回的文件流数据。

二、使用步骤

1. 核心逻辑说明

处理后端返回的二进制文件流时，需将 XMLHttpRequest 的 responseType 设置为 'blob' 以获取 Blob 对象，随后利用 window.URL.createObjectURL 生成临时 URL 供 iframe 使用。需要注意的是，若文件后缀为大写 .PDF，部分浏览器可能无法直接预览，建议提供下载链接供用户查看。

 <iframe  :src="url" style="border: none;width: 100%;height: 100%;">
     <p>您的浏览器不支持 iframe 标签,请从列表中下载预览</p>
 </iframe>

  data () {
    return {
      url: '',
      }
  },
  methods: {
   downLoadFileImg (fileUrl, fileName) {// 后端文件地址和名称
      // 可下载，名称也有效 -- 推荐
      const x = new window.XMLHttpRequest()
      x.open('GET', fileUrl, true)
      x.responseType = 'blob' // 选择返回格式为blob --- 一般后端返回的是看不懂的文件流 故需要转成blob
      x.onload = () => {
        this.url = window.URL.createObjectURL(x.response) //将后端返回的blob文件读取出url
		console.log('blob====',x.response)   //Blob {size: 38617, type: 'application/pdf'}
		console.log('url====',this.url)   //blob:http://localhost:7197/cb047277-e5e6-4905-bf8c-dbecd86a0105
		// url可以预览和下载------如果想要下载就把下方注释打开即可
        // const a = document.createElement('a')
        // a.href = this.url
        // a.download = fileName
        // a.click()
      }
      x.send()
      // // 或者下方的方式
      // axios({
      //   url: G_CGI_PHP.superOrder.upfile + "?id=" + this.rowData.id,
      //   method: 'get',
      //   timeout: 100000,
      //   responseType: 'blob',
      //   headers: {
      //     // "type": 'application/pdf'
      //   },
      // }).then(res => {
      //   console.log('res.data', res.data)
      //   this.url = window.URL.createObjectURL(res.data) //将后端返回的blob文件读取出url
      //   console.log('通过读取blob文件得到url地址===', this.url)
      // }).catch(error => {
      //   console.log(error)
      // })
    },
  }