后端返回下载地址url，前端如何下载文件

前端通过URL下载文件通常有以下几种方式： 1. 使用HTML的`<a>`标签：这是一种简单直接的方法，只需要将文件的URL设置为`<a>`标签的`href`属性，并通过设置`download`属性来提示浏览器下载而不是跳转。例如： ```html <a href="文件URL" download>下载文件</a> ``` 当用户点击这个链接时，浏览器会自动开始下载文件。 2. 使用JavaScript的`fetch`或`XMLHttpRequest`：这种方式可以提供更多的控制能力，比如在下载前进行认证，或者下载过程中给用户反馈。使用`fetch`函数可以通过设置响应类型为`"blob"`来处理文件内容。示例如下： ```javascript fetch('文件URL', { method: 'GET' }).then(response => response.blob()) .then(blob => { const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = '文件名'; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); }) .catch(error => { console.log('下载出错:', error); }); ``` 这段代码首先发送GET请求到文件的URL，然后将响应的Blob对象转换为一个可以下载的URL，并创建一个临时的`<a>`标签来模拟点击下载。 3. 使用第三方库：如axios等，这些库封装了HTTP请求，使得操作更加简便。使用axios下载文件可能如下所示： ```javascript axios({ url: '文件URL', method: 'GET', responseType: 'blob', // 重要 }).then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = '文件名'; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); }) .catch(error => { console.log('下载出错:', error); }); ``` 这段代码使用axios发送请求，并在收到响应后创建一个临时的下载链接。