基于若依前后端分离版（Springboot+Vue）的文件预览

若依是一个开源的企业级平台，其前后端分离版本中包含了文件预览的功能。以下是一个简化的文件预览功能的实现示例，假设你已经有了文件的存储路径和相关的权限控制。

后端（Spring Boot）:

import org.springframework.core.io.Resource;
import org.springframework.core.io.UrlResource;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;
 
import java.nio.file.Path;
import java.nio.file.Paths;
 
@RestController
public class FilePreviewController {
 
    // 假设文件存储在这个路径下
    private final Path fileStorageLocation = Paths.get("upload-dir");
 
    @GetMapping("/preview-file/{fileName:.+}")
    public ResponseEntity<Resource> previewFile(@PathVariable String fileName) {
        try {
            Path filePath = fileStorageLocation.resolve(fileName).normalize();
            Resource resource = new UrlResource(filePath.toUri());
 
            if (resource.exists()) {
                // 根据文件类型设置不同的响应类型
                return ResponseEntity.ok()
                        .body(resource);
            } else {
                return ResponseEntity.notFound().build();
            }
        } catch (Exception e) {
            return ResponseEntity.internalServerError().build();
        }
    }
}

前端（Vue.js）:

<template>
  <div>
    <iframe :src="fileUrl" width="100%" height="500px"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      fileUrl: ''
    };
  },
  methods: {
    fetchFileUrl(fileName) {
      this.fileUrl = `http://your-backend-server/preview-file/${fileName}`;
    }
  },
  mounted() {
    this.fetchFileUrl('your-file-name.pdf');
  }
};
</script>

在这个例子中，后端提供了一个API接口/preview-file/{fileName}来预览存储在服务器上的文件。前端Vue组件通过iframe嵌入了文件预览的URL。这个例子假设文件已经存储在服务器上，并且有适当的权限和安全措施来保护文件预览接口。