文件下载的几种方式
1、使用window.open方法
url: 可以为文件存放的地址
function downloadFile(url) {window.open(url);
}
2、使用<a>标签进行文件下载
<a href="/多因素登录说明文档.pdf" class="link-text">说明文档</a>3、使用fetch和Blob对象
这种方法适用于需要处理响应数据为Blob的情况，比如从API获取文件流。
async function downloadFile(url, name) {const response = await fetch(url);const blob = await response.blob();const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.setAttribute('download', name);link.click();URL.revokeObjectURL(link.href);
}
4、使用Axios和Blob对象
如果你的项目中使用了Axios进行HTTP请求，可以结合Blob对象来实现文件下载。
import axios from 'axios';function downloadFile(url, filename) {axios({url: url,method: 'GET',responseType: 'blob', // 重要}).then((response) => {const blob = new Blob([response.data], { type: 'application/octet-stream' });const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.setAttribute('download', filename);link.click();URL.revokeObjectURL(link.href);});
}
5、vue中，实现文件下载，且能看到进度条
<template><div><button @click="startDownload">Download</button><div v-if="downloadProgress > 0"><p>Download Progress: {{ downloadProgress }}%</p><progress :value="downloadProgress" max="100"></progress><button @click="cancelDownload">Cancel Download</button></div><div v-if="error"><p>Error: {{ error }}</p></div></div>
</template><script setup>
import { ref } from 'vue';
import axios from 'axios';const downloadProgress = ref(0);
const error = ref(null);
const cancelTokenSource = axios.CancelToken.source();const startDownload = () => {error.value = null; // 重置错误信息downloadProgress.value = 0; // 重置下载进度axios({method: 'get',url: 'your-file-url', // 接口urlresponseType: 'blob',cancelToken: cancelTokenSource.token,onDownloadProgress: (progressEvent) => {if (progressEvent.lengthComputable) {downloadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total);}},}).then((response) => {// 创建一个URL对象并下载文件const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.setAttribute('download', 'filename.ext'); // 设置下载文件名document.body.appendChild(link);link.click();link.remove();}).catch((error) => {if (axios.isCancel(error)) {console.log('Request canceled', error.message);} else {error.value = error.message; // 设置错误信息}});
};const cancelDownload = () => {cancelTokenSource.cancel('Download canceled by the user.');downloadProgress.value = 0; // 重置下载进度
};
</script><style>
progress[value] {width: 100%;height: 20px;
}
</style>上述几种下载方式的优劣势：
1、window.open :
优势：
- 简单易用：只需要一行代码即可实现。
- 无需额外的DOM操作：不需要创建额外的DOM元素。
劣势：
- 控制有限：无法控制下载进度，也无法提供下载进度反馈。
- 安全性问题：可能会受到浏览器安全策略的限制，某些情况下可能被浏览器拦截
2、a 标签
优势：
- 兼容性好：大多数现代浏览器都支持。
- 无需额外的网络请求：直接通过URL下载，不需要通过JavaScript获取文件内容。
- 简单实现：代码简单，易于实现。
劣势：
- 控制有限：同样无法控制下载进度，也无法提供下载进度反馈。
- 用户体验：在某些情况下，用户体验不如其他方法，因为用户可能会被重定向到新页面
- url 指下载文件的存放地址，服务器可以访问的静态资源的地址，可以放在前端本地的public 目录下
3、使用fetch和Blob对象
优势：
- 现代API：fetch是现代的网络请求API，支持Promise，易于集成到异步流程中。
- 进度控制：可以通过监听fetch请求的progress事件来实现下载进度的监控。
- 流式处理：对于大文件，fetch可以更好地处理流式数据。
劣势：
- 浏览器兼容性：虽然现代浏览器普遍支持fetch，但在一些旧浏览器中可能需要polyfill。
- 复杂度：对于简单的下载需求，使用fetch可能显得有些过度。
4、使用Axios和Blob对象
优势：
- 集成度高：如果你的项目中已经使用了Axios，那么使用Axios进行文件下载可以保持代码的一致性。
- 配置灵活：Axios提供了丰富的配置选项，可以轻松地处理不同的下载需求。
- 错误处理：Axios的错误处理机制可以简化下载失败时的处理流程。
劣势：
- 依赖外部库：需要依赖Axios库，增加了项目的依赖。
- 性能：相比于原生的fetch，使用Axios可能会有轻微的性能开销。
5、vue中的文件下载
优势：
- 进度反馈：可以提供详细的下载进度反馈，提升用户体验。
- 取消下载：支持取消下载操作，给用户提供更多的控制权。
劣势：
- 代码复杂度：实现进度条和取消下载功能需要更多的代码和逻辑。