vue下载文件服务器上文件
时间: 2023-09-02 07:13:33 浏览: 64
要在Vue中从服务器上下载文件,你可以使用axios库。以下是一个简单的例子:
1. 首先,安装axios库:
```
npm install axios --save
```
2. 在Vue组件中引入axios:
```javascript
import axios from 'axios';
```
3. 创建一个方法来下载文件:
```javascript
downloadFile() {
axios({
url: 'http://example.com/file.pdf',
method: 'GET',
responseType: 'blob', // important
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.pdf');
document.body.appendChild(link);
link.click();
});
}
```
在这个例子中,我们使用axios从服务器上获取一个PDF文件。我们设置`responseType`为`blob`,这意味着我们期望响应为二进制数据。在响应返回后,我们创建一个带有文件数据的URL,并创建一个`<a>`标签来下载文件。最后,我们模拟了一个点击事件来下载文件。
注意:你需要将URL替换为你的服务器上的实际文件路径。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)