vue 下载文件怎么写
时间: 2024-02-16 18:52:47 浏览: 23
在 Vue 中实现文件下载可以使用以下代码:
```javascript
// 下载文件
downloadFile() {
// 文件下载链接
const url = 'http://example.com/file.pdf';
// 发送 GET 请求
this.$axios({
method: 'get',
url: url,
responseType: 'blob' // 表明返回服务器返回的数据类型
}).then(response => {
// 创建一个 Blob 对象,表示二进制数据
const blob = new Blob([response.data], {
type: response.headers['content-type']
});
// 创建一个 a 标签,用于下载文件
const link = document.createElement('a');
// 设置 a 标签的属性
link.href = window.URL.createObjectURL(blob);
link.download = 'file.pdf';
// 将 a 标签添加到 DOM 中
document.body.appendChild(link);
// 点击 a 标签,触发下载操作
link.click();
// 移除 a 标签
document.body.removeChild(link);
}).catch(error => {
console.log(error);
});
}
```
上述代码中,我们使用 Axios 库发送 GET 请求,请求服务器上的文件。通过设置 `responseType` 为 `blob`,表明返回的是二进制数据。在响应成功的回调函数中,我们将获取到的数据创建一个 Blob 对象,然后创建一个 a 标签,设置其 `href` 属性为文件的 URL,`download` 属性为文件名,最后将 a 标签添加到 DOM 中,触发点击事件,实现文件下载。