前端文件下载有多种方法，每种方法适用于不同的场景。以下是几种常见的前端文件下载方法及其示例代码：
1. 直接设置 <a> 标签的 href 属性
适用于简单的文件下载，服务器会自动响应带有 Content-Disposition: attachment 头的文件。
function downloadFile(url, filename, token) {// 创建一个隐藏的 <a> 元素const a = document.createElement('a');a.style.display = 'none';// 检查 URL 是否已经包含查询参数const urlWithToken = url.includes('?') ? `${url}&token=${encodeURIComponent(token)}`: `${url}?token=${encodeURIComponent(token)}`;// 设置 <a> 元素的 href 属性为带有 token 的 URLa.href = urlWithToken;// 设置下载的文件名a.download = filename || 'download';// 将 <a> 元素添加到文档中document.body.appendChild(a);// 触发点击事件a.click();// 移除 <a> 元素document.body.removeChild(a);
}// 调用函数
downloadFile('https://example.com/path/to/file.pdf', 'file.pdf', 'yourTokenValue');
2. 使用 fetch API 下载 Blob 文件
适用于需要处理文件内容的情况，例如从服务器获取文件内容后手动触发下载。
function downloadFile(url, filename, token) {fetch(url, {method: 'GET',headers: {'Authorization': `Bearer ${token}`,// 其他头部信息}}).then(response => {if (!response.ok) {throw new Error('Network response was not ok ' + response.statusText);}return response.blob();}).then(blob => {const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = filename || 'download';a.style.display = 'none';document.body.appendChild(a);a.click();window.URL.revokeObjectURL(url);document.body.removeChild(a);}).catch(error => {console.error('Download failed:', error);});
}// 调用函数
downloadFile('https://example.com/path/to/file.pdf', 'file.pdf', 'yourTokenValue');
3. 使用表单提交
适用于需要携带参数或进行 POST 请求的情况。
<form id="downloadForm" action="https://example.com/download" method="POST" target="_blank"><input type="hidden" name="token" value="yourTokenValue"><!-- 其他需要的输入字段 -->
</form><script>document.getElementById('downloadForm').submit();
</script>
4. 使用 iframe 触发下载
适用于不需要用户交互的文件下载。
<iframe id="downloadIframe" style="display:none;"></iframe><script>function triggerDownload(url) {const iframe = document.getElementById('downloadIframe');iframe.src = url;}// 调用函数triggerDownload('https://example.com/path/to/file.pdf');
</script>
5. 使用 XMLHttpRequest 下载 Blob 文件
适用于需要兼容旧浏览器的情况。
function downloadFile(url, filename, token) {const xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.setRequestHeader('Authorization', `Bearer ${token}`);xhr.responseType = 'blob';xhr.onload = function() {if (this.status === 200) {const blob = this.response;const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = filename || 'download';a.style.display = 'none';document.body.appendChild(a);a.click();window.URL.revokeObjectURL(url);document.body.removeChild(a);} else {console.error('Download failed:', this.statusText);}};xhr.onerror = function() {console.error('Download failed:', this.statusText);};xhr.send();
}// 调用函数
downloadFile('https://example.com/path/to/file.pdf', 'file.pdf', 'yourTokenValue');
6. 使用 Blob 和 FileSaver.js 库
FileSaver.js 是一个第三方库，可以简化文件下载操作。
首先，安装 FileSaver.js：
npm install file-saver
然后在代码中使用：
import { saveAs } from 'file-saver';function downloadFile(url, filename, token) {fetch(url, {method: 'GET',headers: {'Authorization': `Bearer ${token}`, // 添加 token 到请求头// 其他头部信息}}).then(response => {if (!response.ok) {throw new Error('Network response was not ok ' + response.statusText);}return response.blob();}).then(blob => {saveAs(blob, filename || 'download');}).catch(error => {console.error('Download failed:', error);});
}// 调用函数
downloadFile('https://example.com/path/to/file.pdf', 'file.pdf', 'yourTokenValue');
总结
- 直接设置
<a>标签的href属性：适用于简单的文件下载。 - 使用
fetchAPI 下载 Blob 文件：适用于需要处理文件内容的情况。 - 使用表单提交：适用于需要携带参数或进行 POST 请求的情况。
- 使用
iframe触发下载：适用于不需要用户交互的文件下载。 - 使用
XMLHttpRequest下载 Blob 文件：适用于需要兼容旧浏览器的情况。 - 使用
Blob和FileSaver.js库：适用于需要简化文件下载操作的情况。
