用springboot和vue写一个下载本地文件的代码
时间: 2024-06-08 11:12:26 浏览: 19
首先,你需要在 Spring Boot 后端实现一个 REST API,用于接收前端 Vue 发送的下载请求。然后在 Vue 前端实现一个按钮或链接,向后端发送下载请求。
下面是 Spring Boot 后端的实现:
1. 在 pom.xml 中添加依赖:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-io</artifactId>
<version>1.3.2</version>
</dependency>
```
2. 在 Controller 中添加下载接口:
```java
import org.apache.commons.io.FileUtils;
import org.springframework.core.io.ByteArrayResource;
import org.springframework.core.io.Resource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import java.io.File;
import java.io.IOException;
@Controller
public class DownloadController {
@GetMapping("/download/{filename}")
public ResponseEntity<Resource> downloadFile(@PathVariable String filename) throws IOException {
File file = new File("/path/to/your/file/" + filename);
ByteArrayResource resource = new ByteArrayResource(FileUtils.readFileToByteArray(file));
HttpHeaders headers = new HttpHeaders();
headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + file.getName());
headers.add(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_OCTET_STREAM_VALUE);
return ResponseEntity.ok()
.headers(headers)
.contentLength(file.length())
.body(resource);
}
}
```
3. 配置文件下载路径:
在 application.properties 或 application.yml 中添加以下配置:
```yaml
spring:
resources:
static-locations: file:/path/to/your/file/
```
这样,当你访问 `http://localhost:8080/download/your_file_name.txt` 时,就会下载 `/path/to/your/file/your_file_name.txt` 文件。
接下来是 Vue 前端的实现:
1. 在 Vue 组件中添加下载方法:
```html
<template>
<div>
<button @click="downloadFile">Download</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile() {
const filename = 'your_file_name.txt';
const url = `http://localhost:8080/download/${filename}`;
window.open(url, '_blank');
}
}
}
</script>
```
2. 运行前端项目:
```bash
npm install
npm run serve
```
现在你可以在浏览器中打开 `http://localhost:8080`,点击 Download 按钮即可下载文件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)