前端获取连接直接下载文件
时间: 2023-12-02 10:03:15 浏览: 47
在前端获取连接直接下载文件的方法主要有两种:使用`<a>`标签的`download`属性和使用`XMLHttpRequest`对象进行文件下载。
1. 使用`<a>`标签的`download`属性:
```html
<a href="https://example.com/path/to/file.pdf" download>点击下载文件</a>
```
这样设置后,当用户点击该链接时,浏览器会直接下载指定的文件。
2. 使用`XMLHttpRequest`对象进行文件下载:
```javascript
function downloadFile(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
if (xhr.status === 200) {
const blob = new Blob([xhr.response], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'filename.ext';
a.click();
URL.revokeObjectURL(url);
}
};
xhr.send();
}
```
使用上面的函数,你可以通过传递文件的URL调用 `downloadFile(url)` 来实现文件的下载。在函数内部,我们使用`XMLHttpRequest`对象向服务器发送GET请求,获取文件数据,并将其转换为Blob对象。然后,我们创建一个临时的URL,将其赋值给带有`download`属性的`<a>`标签的`href`属性,并模拟点击该链接来触发文件下载。
这两种方法都可以让用户直接下载文件,具体选择哪种方法取决于你的需求和文件的来源。