前端Blob文件流显示PDF的三种实现方案

作者：桌面漫游

时间：2026-10-31

本文介绍前端通过Blob文件流显示PDF的三种方法：直接在新窗口打开、使用iframe嵌入以及集成PDF.js。重点说明axios请求需配置responseType为blob或arraybuffer，并指出各方案的局限性及PDF.js跨域、清晰度设置等关键配置细节。

文章目录

Blob文件流请求配置

首先需要对前端发起的请求进行相应调整。

在请求配置中，必须将 responseType 设置为 'blob'。

请求头
{
        responseType: 'blob',
        url: url,
        method: 'get',
    }

前端PDF预览方案

以下是三种常见的处理方案：

第一种方法是直接处理文件流，尝试在新页面中打开。

const blob = new Blob([data],{
type:'application/pdf'
})
let url = window.URL.createObjectURL(blob)
window.open(url,'_blank')
问题在于父页面关闭或者刷新后，文件页面获取不到文件流，刷新显示空白页。

第二种方法是在新页面中使用 iframe 标签进行嵌入显示。

<iframe :src='xxxxxx'>
问题在于点击iframe中文件之后无法在iframe监听事件，ctrl+p 显示空白

第三种方法是引入并使用 PDF.js 库进行渲染预览。

到 mozilla.github.io/pdf.js/gett… 页面中找到下载位置，下载 PDF.js
在viewer.js 修改
注释下列代码   不然 可能会出现跨域错误，无法正常预览文件
if (origin !== viewerOrigin && protocol !== "blob:") {
  throw new Error("file origin does not match viewer's");
}

随后在页面展示
let path = window.URL.createObjectURL(blob)
const fileUrl = '/pdfjs2/web/viewer.html'
// 生产环境下
if (process.env.NODE_ENV === 'production') {
  this.pdfurl = fileUrl + '?file=' + encodeURIComponent(path)
} else {
// 开发环境
  this.pdfurl = fileUrl + '?file=' + encodeURIComponent(path)
}

修改清晰度    --注意清晰度越高，打印预览时 谷歌内核滚动条越卡
this._printResolution = 450//printResolution || 150
新版本的pdf.js viewer.js被改为mjs，上线时nginx需要修改
另外还有个bug 在一个页面打印预览时，同源的其他页面无法点击

此外，还可以参考 Blob 流在线预览 PDF 文件及图片的相关实现。

需要注意的是，如果采用特定方式获取数据，必须加上 responseType: 'arraybuffer' 配置。

import axios from 'axios'
const fileTypeList = ['application/pdf', 'image/png', 'image/gif', 'image/jpeg', 'txt/plain']
invoicePreview () {
      axios({
        method: 'get',
        url: '/acc_test/index/test_pdf',
        baseURL: process.env.HOSTURL,
        responseType: 'arraybuffer'
      }).then(res => {
        let fileType = res.headers['content-type']
        const binaryData = []

        if (fileType && fileTypeList.includes(fileType)) {
          binaryData.push(res.data)
          let URL = window.URL.createObjectURL(new Blob(binaryData, { type: fileType, charset: 'utf-8' }))
          window.open(URL)
        } else {
          this.$Message.error('不支持此文件预览')
        }
      })
    }