Java结合VUE pdf.js 实现PDF在线预览

### 实现 Java 后端与 Vue 前端结合 pdf.js 的 PDF 在线预览 为了实现基于 Java 和 Vue 结合 pdf.js 的 PDF 文件在线预览功能，可以按照以下方法完成： #### 1. **前端部分** 在 Vue 中集成 pdf.js 插件并配置其运行环境。 - 安装 `pdfjs-dist` 库： ```bash npm install pdfjs-dist ``` - 创建一个组件用于加载和显示 PDF 文件。以下是示例代码片段： ```javascript <template> <div> <canvas ref="pdfCanvas"></canvas> </div> </template> <script> import { getDocument } from 'pdfjs-dist'; export default { props: ['pdfUrl'], data() { return { scale: 1.5, }; }, methods: { async loadPdf(url) { const loadingTask = getDocument(url); const pdf = await loadingTask.promise; const page = await pdf.getPage(1); // 加载第一页 const viewport = page.getViewport({ scale: this.scale }); const canvas = this.$refs.pdfCanvas; const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport, }; await page.render(renderContext).promise; // 渲染页面 }, }, mounted() { if (this.pdfUrl) { this.loadPdf(this.pdfUrl); } }, }; </script> ``` 此代码实现了通过 URL 动态加载 PDF 并将其渲染到 Canvas 上的功能[^2]。 #### 2. **后端部分** Java 后端负责提供 PDF 文件流数据给前端。可以通过 RESTful API 返回文件流的方式实现。 - 使用 Spring Boot 构建服务端逻辑： ```java @RestController @RequestMapping("/api/file") public class FileController { @GetMapping(value = "/preview/{id}", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE) public ResponseEntity<Resource> previewFile(@PathVariable String id) throws IOException { // 根据 ID 查询数据库中的文件路径或其他存储位置 Path filePath = Paths.get("path/to/your/files/" + id + ".pdf"); Resource resource = new InputStreamResource(new FileInputStream(filePath.toFile())); long contentLength = Files.size(filePath); HttpHeaders headers = new HttpHeaders(); headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + id + "\""); return ResponseEntity.ok() .headers(headers) .contentLength(contentLength) .body(resource); } } ``` 上述代码定义了一个 `/api/file/preview/{id}` 接口，它可以根据指定的文件 ID 提供对应的 PDF 流数据[^3]。 #### 3. **前后端交互** 当用户点击某个按钮触发事件时，前端向后端发送请求获取 PDF 数据，并将返回的数据传递至 pdf.js 进行解析和展示。 例如，在 Vue 组件中发起 HTTP 请求： ```javascript methods: { fetchAndRenderPdf(fileId) { axios({ method: 'GET', url: '/api/file/preview/' + fileId, responseType: 'arraybuffer', // 设置响应类型为二进制数组 }).then(response => { let uint8Array = new Uint8Array(response.data); let blob = new Blob([uint8Array], { type: 'application/pdf' }); let fileURL = URL.createObjectURL(blob); this.$refs.viewerComponent.pdfUrl = fileURL; // 将 URL 赋值给子组件属性 }); }, }, ``` --- ### 总结 以上方案展示了如何利用 Java 后端配合 Vue 前端以及 pdf.js 来构建完整的 PDF 在线预览解决方案。其中重点在于后端需正确处理文件流传输，而前端则依赖于 pdf.js 解析接收到的内容并呈现出来[^4]。 ---