I’m trying to attach a pdf viewer in my vaadin app. And I have 2 possible solutions in mind:
Use an existing component in Vaadin…All samples I see are from Vaadin 8 using Embedded object. Is there any compatible PDF viewer component for Vaadin 13?
using 3rd party javascript library. I’m trying to use [ViewerJS]
(https://viewerjs.org/) but I’m unable to load the static Index.html as instructed in ViewerJS [instruction.]
(https://viewerjs.org/instructions/).
As per ViewerJS instruction I could create a link like so (where ViewerJS is in my server folder):
Here are the basic steps that are necessary to put ViewerJS on your website.
Everything starts with downloading ViewerJS from the website.
Unpack the file on your computer. This will give you a folder called 'ViewerJS'. Upload that folder to your webserver, preferably to the top folder. Now you are ready to see ViewerJS in action.
<a href="/ViewerJS/#../path/to/filename.ext">
Tried calling a javascript window.open() function but I can’t seem to reference the static html page.
@Tag("object")
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();
}
}
This component can be used in three ways:
Hosting a remote pdf document via a full URL:
@Route("test")
public class TestView extends Div {
public TestView() {
add(new EmbeddedPdfDocument("https://vaadin.com/download/book-of-vaadin/vaadin-7/pdf/book-of-vaadin.pdf"));
setHeight("100%");
}
}
Hosting a static document from the applications src/main/webapp/frontend directory:
@Route("test")
public class TestView extends Div {
public TestView() {
add(new EmbeddedPdfDocument("frontend/book-of-vaadin.pdf"));
setHeight("100%");
}
}
Dynamically reading a PDF in the application and exposing it to the user through a StreamResource:
@Route("test")
public class TestView extends Div {
public TestView() {
add(new EmbeddedPdfDocument(new StreamResource("book-of-vaadin.pdf", () -> {
try {
return getPdfInputStream();
} catch (FileNotFoundException e) {
return new ByteArrayInputStream(new byte[]{});
}
})));
setHeight("100%");
}
private InputStream getPdfInputStream() throws FileNotFoundException {
return new FileInputStream("/home/dennis/workspace/vaadin/src/main/webapp/frontend/book-of-vaadin.pdf");
}
}
@Tag("object")
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();
}
}
This component can be used in three ways:
Hosting a remote pdf document via a full URL:
@Route("test")
public class TestView extends Div {
public TestView() {
add(new EmbeddedPdfDocument("https://vaadin.com/download/book-of-vaadin/vaadin-7/pdf/book-of-vaadin.pdf"));
setHeight("100%");
}
}
Hosting a static document from the applications src/main/webapp/frontend directory:
@Route("test")
public class TestView extends Div {
public TestView() {
add(new EmbeddedPdfDocument("frontend/book-of-vaadin.pdf"));
setHeight("100%");
}
}
Dynamically reading a PDF in the application and exposing it to the user through a StreamResource:
@Route("test")
public class TestView extends Div {
public TestView() {
add(new EmbeddedPdfDocument(new StreamResource("book-of-vaadin.pdf", () -> {
try {
return getPdfInputStream();
} catch (FileNotFoundException e) {
return new ByteArrayInputStream(new byte[]{});
}
})));
setHeight("100%");
}
private InputStream getPdfInputStream() throws FileNotFoundException {
return new FileInputStream("/home/dennis/workspace/vaadin/src/main/webapp/frontend/book-of-vaadin.pdf");
}
}
Unfortunately, this shows a conflict with a particular dependency.
Caused by: org.eclipse.aether.collection.UnsolvableVersionConflictException: Could not resolve version conflict among [org.vaadin.klaudeta:grid-pagination:jar:1.0.0 -> org.webjars.bowergithub.klaudeta:plutonium-pagination:jar:0.2.1 -> org.webjars.bowergithub.polymerelements:paper-button:jar:[2.1.3,3), org.vaadin.alejandro:pdf_browser:jar:1.0.0-alpha1 -> org.webjars.bowergithub.ingressorapidowebcomponents:pdf-browser-viewer:jar:1.0.6 -> org.webjars.bowergithub.polymerelements:paper-button:jar:[1.0.12,2)]
at org.eclipse.aether.util.graph.transformer.NearestVersionSelector.newFailure(NearestVersionSelector.java:150)
at org.eclipse.aether.util.graph.transformer.NearestVersionSelector.backtrack(NearestVersionSelector.java:111)
at org.eclipse.aether.util.graph.transformer.NearestVersionSelector.selectVersion(NearestVersionSelector.java:84)
at org.eclipse.aether.util.graph.transformer.ConflictResolver.transformGraph(ConflictResolver.java:187)
at org.eclipse.aether.internal.impl.DefaultDependencyCollector.collectDependencies(DefaultDependencyCollector.java:273)
This is a real problem with webjars when we have independent jars depend on different versions of the same dependent jar. However, since webjars generally do not contain Java class files, it should not cause an issue at runtime (each webcomponent has its own scope for html, css or other resource files - I may be wrong here, I am not a webcomponent expert). Unfortunately, IDEs do not understand this.
The solution provided by Dennis works fine for me on Microsoft Edge (Vaadin 14) but will not work in Chrome or Firefox.
My Chrome settings are configured to open the PDF not download it. If I set it to download I get a PDF icon and can open the file in a Adobe Acrobat viewer.
I can access the files directly from both browsers perfectly but if I go through my application using Dennis’s solution above I get a blank screen - no errors.
Out of curiosity, does anybody else have difficulty with viewing multi page PDF’s using this method on iOS devices? It will display the first page, but not let you scroll to other pages.
@Tag("object")
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();
}
}
This component can be used in three ways:
Hosting a remote pdf document via a full URL:
@Route("test")
public class TestView extends Div {
public TestView() {
add(new EmbeddedPdfDocument("https://vaadin.com/download/book-of-vaadin/vaadin-7/pdf/book-of-vaadin.pdf"));
setHeight("100%");
}
}
Hosting a static document from the applications src/main/webapp/frontend directory:
@Route("test")
public class TestView extends Div {
public TestView() {
add(new EmbeddedPdfDocument("frontend/book-of-vaadin.pdf"));
setHeight("100%");
}
}
Dynamically reading a PDF in the application and exposing it to the user through a StreamResource:
@Route("test")
public class TestView extends Div {
public TestView() {
add(new EmbeddedPdfDocument(new StreamResource("book-of-vaadin.pdf", () -> {
try {
return getPdfInputStream();
} catch (FileNotFoundException e) {
return new ByteArrayInputStream(new byte[]{});
}
})));
setHeight("100%");
}
private InputStream getPdfInputStream() throws FileNotFoundException {
return new FileInputStream("/home/dennis/workspace/vaadin/src/main/webapp/frontend/book-of-vaadin.pdf");
}
}
Dennis’s solution worked for us! Thank you, Dennis!
@Tag("object")
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();
}
}
This component can be used in three ways:
Hosting a remote pdf document via a full URL:
@Route("test")
public class TestView extends Div {
public TestView() {
add(new EmbeddedPdfDocument("https://vaadin.com/download/book-of-vaadin/vaadin-7/pdf/book-of-vaadin.pdf"));
setHeight("100%");
}
}
Hosting a static document from the applications src/main/webapp/frontend directory:
@Route("test")
public class TestView extends Div {
public TestView() {
add(new EmbeddedPdfDocument("frontend/book-of-vaadin.pdf"));
setHeight("100%");
}
}
Dynamically reading a PDF in the application and exposing it to the user through a StreamResource:
@Route("test")
public class TestView extends Div {
public TestView() {
add(new EmbeddedPdfDocument(new StreamResource("book-of-vaadin.pdf", () -> {
try {
return getPdfInputStream();
} catch (FileNotFoundException e) {
return new ByteArrayInputStream(new byte[]{});
}
})));
setHeight("100%");
}
private InputStream getPdfInputStream() throws FileNotFoundException {
return new FileInputStream("/home/dennis/workspace/vaadin/src/main/webapp/frontend/book-of-vaadin.pdf");
}
}
Dennis’s solution worked for us! Thank you, Dennis!
How can I set “page-fit” fit a full page into component?
I’m going to bump this again. Viewing PDF’s on iOS only shows the first page. Are there any libraries that work with flow ( 14+ ) aside from directly embedding the pdf?
Brad Harrison:
I’m going to bump this again. Viewing PDF’s on iOS only shows the first page. Are there any libraries that work with flow ( 14+ ) aside from directly embedding the pdf?
Brad Harrison:
I’m going to bump this again. Viewing PDF’s on iOS only shows the first page. Are there any libraries that work with flow ( 14+ ) aside from directly embedding the pdf?
Brad Harrison:
I’m going to bump this again. Viewing PDF’s on iOS only shows the first page. Are there any libraries that work with flow ( 14+ ) aside from directly embedding the pdf?
Yeah, I did try that one but I still have the same problem. iOS only renders the first page of a multipage document. The only library I’ve seen work so far is [Pdf.js]
(https://mozilla.github.io/pdf.js/).
