前端下载文件
时间: 2023-08-11 12:09:22 浏览: 50
要在前端下载文件,可以使用以下方法之一:
1. 使用 HTML5 的下载属性
在 HTML5 中,可以使用 `a` 标签的 `download` 属性来下载文件。例如:
```html
<a href="https://example.com/myfile.pdf" download>Download PDF file</a>
```
这将在用户单击链接时下载文件。
2. 使用 JavaScript
使用 JavaScript 可以通过创建一个链接并模拟单击来下载文件。例如:
```javascript
function downloadFile(url) {
const link = document.createElement('a');
link.href = url;
link.download = true;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
```
这将在调用 `downloadFile` 函数时下载指定的文件。
3. 使用 XMLHttpRequest
使用 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/pdf'});
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = true;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
};
xhr.send();
}
```
这将在调用 `downloadFile` 函数时从服务器下载指定的文件。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)