在前端应用中，使用 Ajax 请求从后端获取二进制文件并实现下载，通常涉及到以下步骤：
- 发送 Ajax 请求：向后端发送请求，获取二进制文件数据。
- 处理响应：将响应数据处理为 Blob 对象（即二进制数据）。
- 创建下载链接：生成一个临时下载链接，并模拟点击事件以触发文件下载。
下面是一个详细的实现示例，使用了现代 JavaScript 的 fetch API 和 Blob 对象。
1. 使用 fetch API 实现二进制文件下载
假设你需要从后端获取一个 PDF 文件并下载它。
1.1 创建一个 HTML 文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download Binary File</title>
</head>
<body>
<h1>Download Binary File Example</h1>
<button id="downloadButton">Download File</button>
<script>
document.getElementById('downloadButton').addEventListener('click', () => {
downloadFile('https://example.com/path/to/file.pdf', 'downloaded-file.pdf');
});
function downloadFile(url, filename) {
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/octet-stream'
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.blob();
})
.then(blob => {
// Create a temporary link element
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
// Append the link to the document body and click it
document.body.appendChild(link);
link.click();
// Clean up
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
}
</script>
</body>
</html>
2. 详细说明
2.1 fetch 请求
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/octet-stream'
}
})
url是文件的下载链接。method: 'GET'指定了请求方法为 GET。headers: { 'Content-Type': 'application/octet-stream' }指定了请求的内容类型为二进制流（虽然在 GET 请求中通常不需要这个 header，但可以添加以防止某些服务器处理异常）。
2.2 处理响应
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.blob();
})
response.ok检查响应是否成功。response.blob()将响应体转换为 Blob 对象，这种对象可以用来处理二进制数据。
2.3 创建下载链接
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
URL.createObjectURL(blob)创建一个临时 URL 供下载使用。link.download = filename设置下载文件的名称。
2.4 触发下载
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
- 将临时链接元素添加到 DOM 中并触发点击事件来启动下载。
- 下载完成后，移除临时链接并释放临时 URL。
3. 使用 Axios 实现二进制文件下载
如果你使用 Axios 库，你可以用类似的方法实现文件下载。Axios 的 responseType 可以设置为 blob 以处理二进制数据。
3.1 安装 Axios
npm install axios
3.2 创建下载函数
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download Binary File with Axios</title>
</head>
<body>
<h1>Download Binary File Example with Axios</h1>
<button id="downloadButton">Download File</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
document.getElementById('downloadButton').addEventListener('click', () => {
downloadFile('https://example.com/path/to/file.pdf', 'downloaded-file.pdf');
});
function downloadFile(url, filename) {
axios.get(url, {
responseType: 'blob' // Set response type to blob
})
.then(response => {
const blob = response.data;
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
})
.catch(error => {
console.error('Error downloading the file:', error);
});
}
</script>
</body>
</html>
4. 总结
以上示例展示了如何在前端应用中从后端获取二进制文件并触发下载。无论是使用 fetch API 还是 Axios 库，关键步骤都包括发送 Ajax 请求、处理响应数据、创建临时下载链接以及模拟点击事件以实现下载。这些技术不仅适用于文件下载，也可以应用于处理其他类型的二进制数据。
