接口返回PDF文件流时，JS可以通过创建Blob对象并利用URL.createObjectURL()方法生成一个可下载资源的URL，然后通过创建a标签，设置其href属性为该URL，并模拟点击来实现接收与下载。流程包括：监听响应、创建Blob对象、生成URL、创建a标签、设置属性、模拟点击。
以下详细介绍该流程的实现方式：
一、监听响应
首先，当你使用AJAX请求，如使用XMLHttpRequest、fetch或者其他库如axios来和后端接口交互时，你需要确保设置响应类型为blob，以便能够接收文件流。
fetch('接口URL', { method: 'GET' })
.then(response => {
if (response.ok) return response.blob();
throw new Error('Network response was not ok.');
})
.then(blob => {
// 处理blob对象
})
.catch(error => console.error('Fetch error:', error));
二、创建Blob对象
在拿到响应后，会返回一个Blob对象，这是一个不可变、原始数据的类文件对象。
function handleBlob(blob){
// 此处blob即是后端返回的文件流
}
三、生成URL
接下来，通过URL.createObjectURL()方法，可以创建一个指向该Blob对象的URL，这个URL可以作为下载链接。
function createDownloadUrl(blob){
const url = window.URL.createObjectURL(blob);
return url;
}
四、创建a标签
创建一个<a>元素，并将生成的URL设置为它的href属性，同时可以设置download属性为想要保存的文件名。
function createDownloadLink(url, fileName){
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = fileName;
downloadLink.style.display = 'none';
document.body.appendChild(downloadLink);
return downloadLink;
}
五、设置属性和模拟点击
最后，模拟点击这个a标签来触发下载，并在下载后释放创建的对象URL资源。
function triggerDownload(link){
link.click();
window.URL.revokeObjectURL(link.href); // 释放URL对象
document.body.removeChild(link); // 移除a标签
}
将以上函数组合使用，就能实现从后端获取PDF文件流并在前端下载。
fetch('接口URL', { method: 'GET' })
.then(response => {
if (response.ok) return response.blob();
throw new Error('Network response was not ok.');
})
.then(blob => {
const url = createDownloadUrl(blob);
const downloadLink = createDownloadLink(url, '下载的文件名.pdf');
triggerDownload(downloadLink);
})
.catch(error => console.error('Fetch error:', error));
在实际开发中，你可能需要根据具体的框架或库，以及后端接口的具体情况调整代码。上述示例展示了一种用JavaScript处理并下载后端返回的PDF文件流的方法。
相关问答FAQs：
1. 我该如何在JavaScript中接收并下载接口返回的PDF文件流？
要在JavaScript中接收并下载接口返回的PDF文件流，可以使用Blob对象和URL.createObjectURL()函数来实现。首先，将接口返回的文件流转换为Blob对象，然后创建一个URL来访问这个Blob对象，最后将这个URL作为下载链接赋值给一个HTML元素的href属性。通过这种方式，用户可以点击下载链接来保存PDF文件到本地。
2. 请问在JavaScript中，我可以使用哪些方法来接收和处理接口返回的PDF文件流？
在JavaScript中，可以使用fetch()方法或XMLHttpRequest对象来发送请求并接收接口返回的PDF文件流。然后，可以通过将返回的文件流转换为Blob对象，再使用FileReader对象或URL.createObjectURL()函数来访问和处理这个文件流。可以根据具体的需求，例如将文件显示在页面上或下载到本地等进行相应的处理。
3. 我想在接收接口返回的PDF文件流之后，在页面上展示这个PDF文件。有哪些方法可以实现这一功能？
在接收到接口返回的PDF文件流后，你可以使用一些开源的JavaScript库，如PDF.js或Viewer.js等，来在页面上展示这个PDF文件。这些库提供了功能强大的API，可以将PDF文件渲染为HTML，并提供交互式的浏览功能，如缩放、翻页、搜索等。你只需要将接收到的文件流传递给这些库，它们会自动处理并在页面上展示PDF文件的内容。
