在Spring Boot和React应用程序中实现文件下载和预览可以通过以下步骤完成：
-
在Spring Boot中实现文件下载：
- 创建一个Spring Boot的Controller类来处理文件下载请求。
- 使用
@GetMapping注解来定义一个映射到下载路径的GET请求方法。 - 在方法体中，使用
ResponseEntity来构建一个响应对象，并设置正确的Content-Disposition头部以指定文件名。 - 从服务器的文件系统或数据库中读取文件内容，并将其作为
ResponseBody返回给客户端。 - 根据需要，可以添加身份验证和权限验证来保护文件下载接口。
-
在React中实现文件预览：
- 在React组件中创建一个下载按钮或链接，用于触发文件下载请求。
- 使用
fetch或axios等工具发送GET请求到Spring Boot服务器上的下载路径。 - 获取到文件内容后，根据文件的类型选择合适的方式进行预览。
- 对于常见的文本文件（如PDF、文档、图片等），可以使用相应的React组件或第三方库进行预览。
- 对于其他文件类型，可以使用HTML5的
<object>或<embed>元素来展示文件内容。
以下是一个简单的示例代码，演示了如何在Spring Boot和React中实现文件下载和预览：
在Spring Boot中的Controller类：
@RestController
public class FileController {@GetMapping("/download/{filename}")public ResponseEntity<Resource> downloadFile(@PathVariable String filename) {// 从服务器的文件系统或数据库中读取文件内容Resource file = ...;// 设置响应头部，指定文件名HttpHeaders headers = new HttpHeaders();headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + filename);return ResponseEntity.ok().headers(headers).contentType(MediaType.APPLICATION_OCTET_STREAM).body(file);}
}
在React组件中的文件下载和预览：
import React from 'react';class FileDownloadPreview extends React.Component {handleDownload = () => {// 发送GET请求下载文件fetch('/download/filename.pdf').then(response => response.blob()).then(blob => {// 根据文件类型进行预览if (blob.type === 'application/pdf') {// 使用PDF.js或其他PDF预览库进行预览const fileUrl = URL.createObjectURL(blob);window.open(fileUrl);} else {// 对于其他文件类型，使用<object>或<embed>元素展示文件内容const fileUrl = URL.createObjectURL(blob);const preview = <object data={fileUrl} type={blob.type} width="100%" height="500px" />;// 在组件中显示预览内容this.setState({ preview });}});};render() {return (<div><button onClick={this.handleDownload}>Download File</button>{this.state.preview}</div>);}
}
请注意，上述代码仅为示例，具体实现可能会根据您的需求和文件类型而有所不同。
