如何在Vaadin Flow中打印?

本文介绍了如何在Vaadin Flow中打印?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想通过按钮打印出用Vaadin 14创建的主页的内容.

I would like to print out the content of a homepage created with Vaadin 14 from a button.

使用Vaadin 8的解决方案不幸地不再适用:

with Vaadin 8 was a solution that unfortunately is no longer applicable:

Button print = new Button("Print This Page"); print.addClickListener(new Button.ClickListener() { public void buttonClick(ClickEvent event) { // Print the current page JavaScript.getCurrent().execute("print();"); } });

有什么想法请在Vaadin14中做到这一点?

Any Idea how to do this in Vaadin14 please?

推荐答案

在Vaadin 10及更高版本中，您可以通过调用 Page::executeJs

In Vaadin 10 and later, you can run arbitrary JavaScript by calling Page::executeJs

UI.getCurrent().getPage().executeJs( … )

您应该可以在其中调用相同的打印功能.请参阅: 在浏览器中执行JavaScript .

There you should be able to call the same print function. See: Executing JavaScript in the Browser.

因此，对于您来说，要打印当前页面:

So in your case, for printing the current page:

UI.getCurrent().getPage().executeJs( "print();" ) ;

使用lambda语法的Vaadin 14.0.12中的完整示例:

Full example in Vaadin 14.0.12, using lambda syntax:

package com.example; import com.vaadin.flowponent.ClickEvent; import com.vaadin.flowponent.UI; import com.vaadin.flowponent.button.Button; import com.vaadin.flowponent.html.H1; import com.vaadin.flowponent.orderedlayout.VerticalLayout; import com.vaadin.flow.router.Route; /** * The main view contains a button and a click listener. */ @Route ( "" ) public class MainView extends VerticalLayout { public MainView ( ) { this.add( new H1( "Print example" ) ); Button printButton = new Button( "Print…" ); printButton.addClickListener( ( ClickEvent < Button > clickEvent ) -> { UI.getCurrent().getPage().executeJs( "print();" ); } ); this.add(printButton); } }