Vaadin 14及以上版本中展示PDF文件的最优实现方案咨询

Vaadin 14 下有两种经过验证的兼容实现方式，均可以直接嵌入Dialog使用：

方案1：原生BrowserFrame实现（优先推荐） #

该方案使用Vaadin 14 核心自带组件，完全兼容所有次级版本，无额外依赖，直接调用浏览器原生PDF渲染能力，是性能最优的方案。

示例代码 #

1. 构造PDF资源

// 从classpath、文件系统或业务接口获取PDF输入流，生成Vaadin可识别的资源对象
StreamResource pdfResource = new StreamResource("preview.pdf", () -> {
    // 此处替换为你的PDF文件输入流获取逻辑
    return getClass().getResourceAsStream("/static/test.pdf");
});
// 动态生成的PDF可配置禁用缓存
pdfResource.setCacheTime(0);

2. 组装组件到对话框

// 绑定资源到BrowserFrame
BrowserFrame pdfFrame = new BrowserFrame("PDF预览", pdfResource);
pdfFrame.setSizeFull();
// 初始化对话框并加载PDF组件
Dialog pdfDialog = new Dialog();
pdfDialog.setWidth("90vw");
pdfDialog.setHeight("90vh");
pdfDialog.add(pdfFrame);
// 打开对话框
pdfDialog.open();

方案优势 #

• 无需引入第三方依赖，适配Vaadin 14全版本
• 自带浏览器原生PDF控制功能：缩放、翻页、下载、打印等
• 配置简单，性能开销极小

方案2：EmbeddedPdfDocument Addon实现（自定义需求场景） #

如果需要隐藏浏览器原生查看器UI、自定义控制逻辑、统一多端渲染效果，可以使用针对Vaadin 14适配的EmbeddedPdfDocument第三方组件，该组件已经过版本兼容验证，可直接使用。

示例代码 #

// 传入PDF字节数组初始化组件
EmbeddedPdfDocument pdfDoc = new EmbeddedPdfDocument(pdfBytes);
pdfDoc.setSizeFull();
// 直接添加到Dialog中即可
Dialog pdfDialog = new Dialog(pdfDoc);
pdfDialog.setSizeFull();
pdfDialog.open();

方案优势 #

• 自定义程度高，可自主控制渲染样式、操作权限
• 渲染效果不受浏览器原生PDF查看器差异影响

注意事项 #

• 早期Vaadin版本的Embedded组件在Vaadin 14中已废弃，不要使用该组件渲染PDF
• 若需要兼容无原生PDF渲染能力的老旧浏览器，可引入PDF.js作为兜底渲染方案，将PDF.js的viewer地址绑定到BrowserFrame即可，无需额外适配。

内容的提问来源于stack exchange，提问作者John