Springboot + vue 点击查看文件多种类型doc、docx、xls、xlsx、pdf 代码示例

下面是一个简单的示例代码，演示如何在Spring Boot和Vue中实现点击查看多种类型文件（包括doc、docx、xls、xlsx、pdf）：

1. 后端Spring Boot代码：

@RestController
@RequestMapping("/api/files")
public class FileController {

    @GetMapping("/{fileName}")
    public ResponseEntity<Resource> downloadFile(@PathVariable String fileName) throws IOException {
        // 根据文件名获取文件路径
        String filePath = "path/to/files/" + fileName;

        // 读取文件内容
        Path path = Paths.get(filePath);
        Resource resource = new InputStreamResource(Files.newInputStream(path));

        // 设置响应头，让浏览器能够正确解析文件类型
        HttpHeaders headers = new HttpHeaders();
        headers.add(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=" + fileName);

        // 返回文件内容和响应头
        return ResponseEntity.ok()
                .headers(headers)
                .contentType(MediaType.APPLICATION_OCTET_STREAM)
                .body(resource);
    }
}

2. 前端Vue代码：

<template>
  <div>
    <ul>
      <li v-for="file in files" :key="file.name">
        <a @click="viewFile(file.name)">{{ file.name }}</a>
      </li>
    </ul>

    <div v-if="selectedFile">
      <iframe :src="selectedFileUrl" width="100%" height="500px"></iframe>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: [],
      selectedFile: null
    };
  },
  methods: {
    getFileList() {
      axios.get('/api/files')
        .then(response => {
          this.files = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    viewFile(fileName) {
      this.selectedFile = fileName;
    }
  },
  computed: {
    selectedFileUrl() {
      return `/api/files/${this.selectedFile}`;
    }
  },
  created() {
    this.getFileList();
  }
};
</script>

以上示例中，后端的`FileController`定义了一个GET请求的接口`/api/files/{fileName}`，用于下载文件。前端的Vue组件中，通过调用后端接口获取文件列表，并为每个文件添加点击事件，点击时将文件名赋值给`selectedFile`，然后通过动态生成的URL来展示文件内容。

请根据实际情况修改代码中的文件路径和URL路径。希望对您有所帮助！如有更多问题，请继续提问。