springboot react文件下载预览

在Spring Boot和React应用程序中实现文件下载和预览可以通过以下步骤完成：

1. 在Spring Boot中实现文件下载：

   • 创建一个Spring Boot的Controller类来处理文件下载请求。
   • 使用@GetMapping注解来定义一个映射到下载路径的GET请求方法。
   • 在方法体中，使用ResponseEntity来构建一个响应对象，并设置正确的Content-Disposition头部以指定文件名。
   • 从服务器的文件系统或数据库中读取文件内容，并将其作为ResponseBody返回给客户端。
   • 根据需要，可以添加身份验证和权限验证来保护文件下载接口。

2. 在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>
        );
    }
}

请注意，上述代码仅为示例，具体实现可能会根据您的需求和文件类型而有所不同。