Vaadin 14 在新的浏览器选项卡中打开新组件

Question

有没有办法可以打开嵌入到组件中的 pdf 并发送到新的浏览器选项卡？

想法是将资源设置为此组件并在新选项卡中打开。稍后我将需要在更多按钮中导航不同的文档。

public class EmbeddedPdfDocument extends Component implements HasSize {

    public EmbeddedPdfDocument(StreamResource resource) {
        this();
        getElement().setAttribute("data", resource);
    }

    public EmbeddedPdfDocument(String url) {
        this();
        getElement().setAttribute("data", url);
    }

    protected EmbeddedPdfDocument() {
        getElement().setAttribute("type", "application/pdf");
        setSizeFull();
    }
}

Answer 1

Vaadin.com 论坛中的This thread 讨论您的问题。

Anchor::setTarget ➙ "_blank"

使用Anchor 小部件作为您的链接。见demo page。

➥ 关键是将“目标”设置为字符串_blank。

String url = "…" ;
Anchor anchor = new Anchor( url , "Open a PDF document" ) ;
anchor.setTarget( "_blank" ) ;  // Specify `_blank` to open in a new browser tab/window.

这是 Vaadin 14.1.19 中基于 Plain Java Servlet 品种的 starter project 的完整示例应用程序。

运行此示例应用程序。单击该链接可查看另一个 Web 浏览器选项卡打开并显示 PDF 文档。

package work.basil.example;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Anchor;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
// @PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
@CssImport ( "./styles/shared-styles.css" )
@CssImport ( value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        // Widgets
        H1 heading = new H1( "Download PDF in browser tab" );

        String url = "https://www.fda.gov/media/76797/download";
        Anchor anchor = new Anchor( url , "Open a PDF document" );
        anchor.setTarget( "_blank" );  // Specify `_blank` to open in a new browser tab/window.

        // Arrange
        this.add( heading , anchor );
    }
}