springboot 用pdfjs 显示pdf文档
时间: 2024-11-13 09:14:53 浏览: 16
Spring Boot 中使用 PDF.js 显示 PDF 文档通常涉及到前端展示和后端数据提供两个部分。PDF.js 是一个由 Mozilla 开发的 JavaScript 库,用于在浏览器中渲染 PDF 文件。
首先,在 Spring Boot 后端,你需要提供 PDF 文件作为响应内容给前端。你可以通过处理文件服务,将 PDF 文件转换为适合网络传输的流(如 `InputStream` 或 `ByteArrayOutputStream`),然后设置合适的响应头如 Content-Type: application/pdf。
```java
@GetMapping("/pdf")
public ResponseEntity<HttpHeaders, InputStream> downloadPdf() {
// 获取PDF文件路径或从数据库加载
String filePath = "path/to/your/pdf/file.pdf";
try (InputStream inputStream = new FileInputStream(filePath)) {
HttpHeaders headers = new HttpHeaders();
headers.add("Content-Disposition", "attachment; filename=\"" + new File(filePath).getName() + "\"");
headers.setContentType(MediaType.APPLICATION_PDF);
return ResponseEntity.ok().headers(headers).body(inputStream);
} catch (IOException e) {
throw new RuntimeException("Failed to read PDF file", e);
}
}
```
然后,在前端,HTML 中可以利用 PDF.js 的 `<script>` 标签引入库,并创建一个 canvas 元素来显示 PDF:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfjs-dist/2.14.257/build/pdf.js"></script>
</head>
<body>
<canvas id="pdfCanvas" width="800" height="600"></canvas>
<script>
pdfjsLib.getDocument('/api/pdf').promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var container = document.getElementById('pdfCanvas');
container.width = viewport.width;
container.height = viewport.height;
var renderContext = {
canvasContext: container.getContext('2d'),
viewport: viewport
};
page.render(renderContext);
});
});
</script>
</body>
</html>
```
这样,当你访问 `/api/pdf` 地址时,Spring Boot 会返回 PDF 文件,而浏览器则使用 PDF.js 解析并显示在页面上。
阅读全文