1

is there a way i can open a pdf embedded into a component and send to a new browser tab?

The idea is to set the resource to this component and open in a new tab. I will need to in more buttons later to navigate between different documents.

enter image description here

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();
    }
}
Youcef LAIDANI
  • 55,661
  • 15
  • 90
  • 140
W.L
  • 31
  • 1
  • 6
  • Your Question is getting less clear. And I suspect you are really asking what should be two separate Question posts. – Basil Bourque Mar 11 '20 at 15:51
  • I think i will try this approach you mention on another question. I will build a UI and load them via parameter. https://stackoverflow.com/questions/51490046/pass-information-to-new-web-browser-window-tab-being-opened-with-browserwindowop – W.L Mar 12 '20 at 14:37

1 Answers1

2

This thread in the Vaadin.com forum discusses your issue.

Anchor::setTarget ➙ "_blank"

Use the Anchor widget for your link. See demo page.

➥ The key is to set the “target” to the string _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.

Here is a complete example app in Vaadin 14.1.19 based on a starter project of the Plain Java Servlet variety.

Run this example app. Click the link to see another web browser tab open and display the PDF document.

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 );
    }
}
Basil Bourque
  • 303,325
  • 100
  • 852
  • 1,154
  • hello there, sorry i added a image to make it clearer. I am wondering if we can design a component that has a toolbar with a pdf embdded and send to a new tab for user to navigate and read different pdfs? – W.L Mar 11 '20 at 07:00