vue写一个下载功能,下载传入前端的response.data
时间: 2024-02-28 18:51:58 浏览: 69
vue实现文件上传读取及下载功能
好的,以下是一个简单的 Vue 下载功能代码示例,其中 `downloadFile` 方法用于接收一个 response.data 参数,将其转换为 Blob 对象,并使用 `URL.createObjectURL` 方法创建一个下载链接,最后模拟点击链接进行下载:
```html
<template>
<div>
<button @click="handleDownload">下载文件</button>
</div>
</template>
<script>
export default {
methods: {
handleDownload(data) {
const blob = new Blob([data], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.txt');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
};
</script>
```
在实际使用中,你可以将 `handleDownload` 方法放在需要触发下载的按钮的点击事件中,并将后端返回的数据作为参数传入。
阅读全文