后端java 前端vue 文件流实现本地文件的下载功能
时间: 2024-05-06 21:20:37 浏览: 15
后端Java代码实现:
```java
@RequestMapping("/download")
public void download(HttpServletResponse response) throws IOException {
String fileName = "example.txt";
File file = new File("D:\\" + fileName);
response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
response.setContentType("application/octet-stream");
InputStream inputStream = new FileInputStream(file);
OutputStream outputStream = response.getOutputStream();
byte[] buffer = new byte[1024];
int len;
while ((len = inputStream.read(buffer)) > 0) {
outputStream.write(buffer, 0, len);
}
inputStream.close();
outputStream.close();
}
```
前端Vue代码实现:
```html
<template>
<div>
<button @click="downloadFile">Download</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
methods: {
downloadFile() {
axios({
url: '/download',
method: 'GET',
responseType: 'blob'
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', 'example.txt')
document.body.appendChild(link)
link.click()
})
}
}
}
</script>
```
在前端代码中,我们使用axios发送GET请求,设置responseType为blob,以便接收二进制文件流。然后创建一个URL对象,并在页面上创建一个a标签,设置其href为URL对象的值,并设置download属性为要下载的文件名,最后模拟点击a标签实现下载。