在传统的Web开发中，前端预览PDF最简单的方式是直接把一个文件链接地址塞进iframe标签里。但越来越多的项目采用前后端分离架构，后端接口出于权限控制或安全考虑，往往不会直接返回PDF的静态地址，而是以二进制流的形式把文件内容回传给前端。这时候如果还按普通字符串去解析响应数据，拿到的就是一串乱码，根本无法打开文件。要正确处理这类场景，就需要用到Blob对象，把二进制数据包装成浏览器认可的文件对象，再生成一个临时URL供页面展示。本文将以jQuery为例，完整演示这一套流程的实现细节。
一、理解Blob对象与二进制文件流的基本概念
Blob全称是Binary Large Object，即二进制大对象，它是浏览器提供的一个原生API，用来表示一段不可变的二进制数据。Blob对象本身不关心数据内容是什么，它只负责存储，你可以把它理解为浏览器内存中的一块数据区域，这块区域可以是一段文本、一张图片，也可以是一个完整的PDF文件。创建Blob对象最直接的方式是new Blob()构造函数，它接收两个参数：第一个参数是数据数组，第二个参数是options对象，其中type属性用来声明数据的MIME类型。
对于PDF文件来说，MIME类型是application/pdf，这个声明非常关键。如果type设置错误或者干脆不设置，后续生成的临时URL在某些浏览器上可能无法正确识别文件类型，导致预览失败或者下载时文件扩展名丢失。先看一个简单的示例，了解Blob的基本用法：
// 用一段数据创建Blob对象
var blob = new Blob(['hello world'], {type: 'text/plain'});
// 查看Blob的大小和类型
console.log(blob.size); // 11
console.log(blob.type); // text/plain后端返回的PDF文件流本质上就是一连串的二进制字节，jQuery的ajax请求默认会把响应当作字符串处理，这会破坏二进制数据的完整性。因此必须显式告诉浏览器，这次请求的响应需要按二进制格式接收，也就是设置xhrFields中的responseType为blob。这是整个方案能否成功的第一道关卡，也是新手最容易踩的坑。
二、使用jQuery的ajax请求获取PDF文件流
从jQuery 1.5版本开始，ajax方法支持xhrFields配置项，通过它可以给原生的XMLHttpRequest对象设置属性。要让响应以Blob形式返回，就需要设置responseType。同时要注意把处理数据的选项关掉，避免jQuery用默认方式转换响应内容。下面是一个完整的请求示例：
$.ajax({
url: '/api/file/getPdf',
method: 'GET',
xhrFields: {
responseType: 'blob' // 关键：告诉浏览器按二进制接收响应
},
success: function(data) {
// 此时data就是一个Blob对象
if (data.type === 'application/pdf') {
previewPdf(data);
} else {
alert('返回的不是PDF文件');
}
},
error: function(xhr, status, err) {
console.error('请求失败：' + err);
}
});这里有几个细节需要注意。第一，responseType必须写在xhrFields里面，而不是直接放在ajax的顶层配置中，因为它是XMLHttpRequest的属性，不是jQuery ajax的配置项。第二，如果接口需要POST请求并携带token等鉴权信息，记得在headers中配置好。第三，当后端返回错误时，响应也可能被包装成Blob，所以在success回调中最好先判断一下type属性，不能盲目认为拿到的一定是PDF。
跨域场景下还需要服务端配合设置CORS响应头，包括Access-Control-Allow-Origin等字段。如果响应头中没有Content-Disposition或者Content-Type声明不正确，前端拿到的Blob的type可能是空字符串，这时可以在创建Blob时手动指定类型来兜底处理。
三、将Blob转换为URL并实现PDF预览
拿到Blob对象之后，接下来要把它变成浏览器可以访问的地址，这里要用到URL.createObjectURL方法。该方法会根据Blob对象生成一个指向内存中该数据的临时URL，格式类似blob:http://localhost:8080/xxxx-xxxx。这个URL可以直接用在iframe、embed或者a标签的src或href属性上。
function previewPdf(blobData) {
// 创建临时URL
var pdfUrl = URL.createObjectURL(blobData);
// 方式一：使用iframe展示
var $iframe = $('<iframe>', {
src: pdfUrl,
width: '100%',
height: '600px',
frameborder: 0
});
$('#pdfContainer').empty().append($iframe);
}除了iframe，还可以使用HTML中的<embed>标签，写法为<embed>并指定type为application/pdf，两者在多数现代浏览器中都能调用内置的PDF阅读器进行渲染。如果需求不是预览而是下载，配合HTML的a标签设置download属性即可实现，示例如下：
// 触发PDF下载而非预览
function downloadPdf(blobData, fileName) {
var url = URL.createObjectURL(blobData);
var a = document.createElement('a');
a.href = url;
a.download = fileName || 'document.pdf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 释放内存
}需要特别提醒的是，createObjectURL生成的URL会一直占用内存，直到页面被卸载。如果用户频繁预览多个文件而不做清理，内存占用会持续增长。良好的习惯是在预览区域销毁或替换时，调用URL.revokeObjectURL方法手动释放，这也是很多教程里忽略掉的一点。
四、常见问题排查与兼容性优化
实际落地时会遇到不少问题，这里整理几个高频出现的坑。第一个是预览出来的PDF一片空白或提示文件损坏，九成原因是responseType没有正确设置，二进制数据被当成字符串解析后编码损坏。第二个是后端返回JSON格式的错误信息时，前端收到的也是一个Blob，此时可以用FileReader把Blob读成文本再解析，示例代码如下：
// 用FileReader解析Blob中可能存在的错误信息
function readBlobAsText(blob) {
var reader = new FileReader();
reader.onload = function() {
try {
var result = JSON.parse(reader.result);
console.log('后端返回的错误信息：', result.message);
} catch (e) {
console.log('是正常的二进制文件');
}
};
reader.readAsText(blob);
}第三个是浏览器兼容性问题，老旧的IE浏览器不支持Blob URL的预览方式，如果项目必须兼容IE，可以考虑引入pdf.js这类纯JavaScript渲染库，它可以把PDF文件解析成canvas逐页绘制，不依赖浏览器内置阅读器，兼容性和展示效果的可控性都更好，代价是文件体积和加载开销更大。
最后建议把整个预览逻辑封装成一个独立函数，对外只暴露接口地址和容器ID两个参数，内部处理好URL创建、预览渲染和内存回收的完整生命周期。这样无论是iframe方案还是pdf.js方案，切换成本都很低，代码的可维护性也会显著提升。
jQuery PDF预览Blob对象二进制数据处理修改时间：2026-09-02 20:49:00