springboot+vue实现pdf和word文件的上传以及预览

<think>嗯，用户想用Spring Boot和Vue实现PDF和Word文件的上传与预览。首先，我需要理清整个流程，分步骤来考虑。 首先，文件上传部分。前端用Vue的话，可能需要用axios来处理文件上传。用户需要选择文件，然后通过表单数据发送到后端。后端用Spring Boot接收文件，保存到服务器或者存储系统中。记得处理跨域问题，可能需要配置CORS。 然后是文件预览。PDF预览相对容易，可以用浏览器自带的PDF查看器，比如用iframe或者embed标签加载PDF的URL。Word文件预览就比较麻烦，因为浏览器不能直接渲染Word。可能需要将Word转为PDF再预览，或者用第三方库，比如docx-preview这样的库。不过用户提到的引用里，引用[2]提到支持Word文档预览，可能用的是将Word转成图片或者HTML来显示。或者使用在线服务转换，但那样可能依赖外部服务。 需要看一下用户提供的引用内容。引用[1]提到Spring Boot和iText生成PDF并提供下载，引用[2]说实现了万能文件预览，包括图片和Word，引用[3]是关于文件上传的示例。所以可能需要结合这些引用中的方法。 后端部分，上传接口应该接收MultipartFile，保存到指定目录，并返回文件信息。对于预览，PDF可以直接提供文件下载链接，而Word可能需要转换。或者像引用[2]提到的，使用已有的开源方案，可能已经处理了这些转换。 前端部分，上传组件需要处理文件选择，上传进度，显示上传结果。预览的话，PDF可以用iframe，Word可能需要后端转换后的内容，或者前端使用docx-preview库来渲染。 可能的步骤： 1. 前端Vue组件实现文件上传，使用axios发送到Spring Boot后端。 2. 后端接收文件，保存到服务器，返回文件路径或标识。 3. 预览时，前端根据文件类型处理：PDF直接显示，Word使用转换后的HTML或使用前端库渲染。 对于Word预览，可能需要后端转换，比如用Apache POI将Word转HTML，或者用开源工具如LibreOffice无头模式转换。但这样会增加后端复杂度。或者使用前端库，如docx.js，这样前端直接解析Word文件，但大文件可能影响性能。 用户引用的参考中，引用[2]提到Spring Boot实现万能预览，可能已经封装了这些转换，所以可能需要查阅该开源项目，看是否可以直接集成。 综上，实现步骤可能包括： - 文件上传：前后端配合，前端传文件，后端存文件。 - PDF预览：直接通过链接在浏览器中展示。 - Word预览：使用转换后的HTML或前端库渲染。 需要确保代码示例正确，比如后端用Spring Boot的@PostMapping处理上传，返回文件URL。前端用Vue的input type="file"获取文件，axios上传，然后根据类型显示预览。 可能的问题点：跨域配置、文件存储路径、大文件上传处理、Word转换的效率等。但用户要求示例教程，可能不需要深入优化，先完成基本功能。 现在根据这些思路，组织步骤，编写代码示例，并确保引用正确的参考文献中的方法，比如文件上传引用[3]，预览引用[1]和[2]。</think>### Spring Boot + Vue 实现PDF/Word文件上传与预览的分步教程 --- #### 一、文件上传功能实现 1. **后端（Spring Boot）** - 文件接收接口：使用`MultipartFile`接收文件并保存到本地目录或云存储 ```java @RestController @RequestMapping("/api/file") public class FileController { @Value("${file.upload-dir}") private String uploadDir; @PostMapping("/upload") public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) { try { String fileName = file.getOriginalFilename(); Path path = Paths.get(uploadDir, fileName); Files.write(path, file.getBytes()); return ResponseEntity.ok("文件上传成功: " + fileName); } catch (IOException e) { return ResponseEntity.status(500).body("上传失败"); } } } ``` - 配置上传路径（`application.properties`）： ``` file.upload-dir=./uploads/ ``` 2. **前端（Vue）** - 使用`<input type="file">`组件和axios发送文件 ```vue <template> <div> <input type="file" @change="handleFileUpload" /> <button @click="submitFile">上传</button> </div> </template> <script> import axios from 'axios'; export default { data() { return { file: null }; }, methods: { handleFileUpload(event) { this.file = event.target.files[0]; }, async submitFile() { const formData = new FormData(); formData.append('file', this.file); try { const response = await axios.post('http://localhost:8080/api/file/upload', formData); alert(response.data); } catch (error) { alert('上传失败'); } } } }; </script> ``` --- #### 二、文件预览功能实现 1. **PDF预览** - **后端**：直接提供文件访问接口 ```java @GetMapping("/preview/pdf") public ResponseEntity<Resource> previewPdf(@RequestParam String filename) { Path path = Paths.get(uploadDir, filename); Resource resource = new FileSystemResource(path.toFile()); return ResponseEntity.ok() .header(HttpHeaders.CONTENT_TYPE, "application/pdf") .body(resource); } ``` - **前端**：使用`<iframe>`嵌入PDF链接 ```vue <iframe :src="`http://localhost:8080/api/file/preview/pdf?filename=${pdfFileName}`" width="100%" height="600px"></iframe> ``` 2. **Word预览** - **方案1**：后端将Word转为HTML（需依赖`Apache POI`或`docx4j`） ```java // 示例：使用docx4j将Word转HTML（需添加依赖） @GetMapping("/preview/word") public ResponseEntity<String> previewWord(@RequestParam String filename) { try { Path path = Paths.get(uploadDir, filename); WordprocessingMLPackage wordMLPackage = WordprocessingMLPackage.load(path.toFile()); HTMLSettings htmlSettings = new HTMLSettings(); StringWriter htmlWriter = new StringWriter(); htmlSettings.setOpcPackage(wordMLPackage); HtmlExporter exporter = new HtmlExporter(htmlSettings); exporter.export(htmlWriter); return ResponseEntity.ok(htmlWriter.toString()); } catch (Exception e) { return ResponseEntity.status(500).body("转换失败"); } } ``` - **方案2**：前端使用`docx-preview`库直接渲染（推荐）[^2] ```vue <template> <div ref="docxContainer"></div> </template> <script> import { renderAsync } from 'docx-preview'; export default { methods: { async previewWord(file) { const response = await fetch(file.url); const arrayBuffer = await response.arrayBuffer(); await renderAsync(arrayBuffer, this.$refs.docxContainer); } } }; </script> ``` --- #### 三、关键配置与依赖 1. **后端跨域配置**（Spring Boot） ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8081") // Vue前端地址 .allowedMethods("GET", "POST"); } } ``` 2. **前端依赖**（Vue） ```bash npm install axios docx-preview ``` ---