前言
在项目中，通常会遇到很多需要下载的需求，那么应该如何处理下载功能呢？
通过模拟a标签实现下载
直接上代码
<template><div><p @click="downloadFile" style="cursor: pointer; color: blue;">Download File</p></div>
</template><script>
export default {methods: {downloadFile() {// 替换成你要下载的文件的URLconst fileUrl = 'https://example.com/path/to/your/file.txt';// 创建一个隐藏的<a>元素const downloadLink = document.createElement('a');downloadLink.href = fileUrl;downloadLink.download = 'downloaded_file.txt'; // 可以设置下载后的文件名// 将<a>元素添加到文档中document.body.appendChild(downloadLink);// 触发点击事件downloadLink.click();// 移除<a>元素document.body.removeChild(downloadLink);}}
};
</script>
我们使用了@click监听点击事件，当用户点击文本时，downloadFile方法会被调用。该方法与之前的纯HTML/JS示例相似，创建一个隐藏的<a>元素，设置文件的URL和下载文件名，触发点击事件，然后移除<a>元素。
通过接口实现下载
这种方式也比较常见，这里以Vue搭配axios为例实现该功能。请求时需要加上responseType: 'blob',，接下来以实际的例子来说明
downloadFile() {// 替换成你的下载接口的URLconst downloadUrl = 'https://example.com/api/download';axios({url: downloadUrl,method: 'GET',responseType: 'blob', // 设置响应类型为 blob}).then(response => {// 处理文件下载let blob = new Blob([res.data]);let downloadElement = document.createElement('a');let href = window.URL.createObjectURL(blob);let fileName = 'downloaded_file.txt';if ('msSaveOrOpenBlob' in navigator) {// 检查该函数在 navigator 对象中是否可用window.navigator.msSaveOrOpenBlob(blob, fileName);} else {downloadElement.href = href;// 设置下载文件名字downloadElement.download = fileName;document.body.appendChild(downloadElement);downloadElement.click();// 释放资源document.body.removeChild(downloadElement);window.URL.revokeObjectURL(href);}}).catch(error => {console.error('下载失败', error);});}
在 Internet Explorer 中，msSaveOrOpenBlob 函数用于保存或打开文件。如果该函数可用，说明浏览器是 Internet Explorer，你可以使用此函数来相应地处理 Blob。
请注意，这仅适用于 Internet Explorer，并且现代浏览器（如 Chrome、Firefox、Edge、Safari）使用不同的方法，因为这个函数在这些浏览器中不受支持。如果需要，确保为其他浏览器提供替代方法。
需要注意的是，通常下载的逻辑都是统一的，如果一个系统中有多处涉及到下载，那么下载的处理逻辑可以放在响应拦截器中，通过后台返回的content-type进行判断是否是下载请求，常见的有：'application/x-msdownload', 'application/force-download', 'application/octet-stream',
