vue下载文件保存到本地
时间: 2023-08-07 19:09:08 浏览: 65
你可以使用 Vue.js 中的 axios 库来下载文件并保存到本地。以下是一个示例代码:
```javascript
// 首先,需要安装 axios 库
// 可以通过以下命令进行安装:
// npm install axios
// 在你的 Vue 组件中引入 axios
import axios from 'axios';
methods: {
downloadFile() {
// 发起 GET 请求获取文件数据
axios.get('http://example.com/file-url', {
responseType: 'blob' // 声明响应类型为 blob
})
.then(response => {
// 创建一个 <a> 标签
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
// 设置下载的文件名
link.setAttribute('download', 'filename.ext');
// 将 <a> 标签添加到 DOM 中,模拟点击下载
document.body.appendChild(link);
link.click();
// 清理临时创建的 URL 对象
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error(error);
});
}
}
```
在上述示例代码中,`downloadFile` 方法会发起一个 GET 请求来获取文件数据。通过设置 `responseType` 为 `'blob'`,响应数据会以 Blob 对象形式返回。接着,我们创建一个临时的 URL 对象,将 Blob 对象数据赋值给 `<a>` 标签的 `href` 属性。然后,我们设置 `<a>` 标签的 `download` 属性来指定下载的文件名。最后,将 `<a>` 标签添加到 DOM 中,并触发模拟点击下载操作。完成下载后,清理临时创建的 URL 对象。
请注意,你需要将 `http://example.com/file-url` 替换为实际的文件 URL,将 `'filename.ext'` 替换为你想要保存的文件名和扩展名。
希望能对你有所帮助!如果有任何疑问,请随时向我提问。
相关推荐
![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)