如何在Vaadin Flow中实现仅PDF打印而非浏览器整页打印？

算力阿峰

2026-8-12

在Vaadin Flow中实现仅打印PDF的方案

下面提供两种可靠的实现方式，专门针对仅打印PDF内容而非整个页面的需求：

方法一：用Embed组件嵌入PDF并触发打印

通过Vaadin的Embed组件将PDF嵌入页面，再调用浏览器API只打印这个嵌入的PDF元素。

代码示例

创建Embed组件加载PDF：

Embed pdfEmbed = new Embed();
pdfEmbed.setType("application/pdf");
// 替换为你的PDF路径，支持本地静态资源或动态生成的PDF地址
pdfEmbed.setSrc("path/to/your/target.pdf");
pdfEmbed.setWidth("100%");
pdfEmbed.setHeight("600px");
add(pdfEmbed);

添加打印按钮，通过JS触发PDF打印：

Button printBtn = new Button("打印PDF");
printBtn.addClickListener(e -> {
    getUI().ifPresent(ui -> {
        ui.getPage().executeJs("""
            const embedElement = document.querySelector('embed[type="application/pdf"]');
            if (embedElement) {
                embedElement.contentWindow.print();
            }
        """);
    });
});
add(printBtn);

方法二：打开新窗口加载PDF并自动打印

如果不需要在当前页面显示PDF，可以通过新窗口加载文件后直接触发打印。

代码示例

Button printBtn = new Button("打印PDF");
printBtn.addClickListener(e -> {
    getUI().ifPresent(ui -> {
        ui.getPage().executeJs("""
            const pdfWin = window.open('path/to/your/target.pdf');
            pdfWin.onload = function() {
                pdfWin.print();
                // 可选：打印完成后自动关闭窗口
                // pdfWin.close();
            };
        """);
    });
});
add(printBtn);