Re: No Visual display

[weiliang2]

Hi,

can you help me? this is a great component but i cant seem to see anything after setting the pdf.

attached is the pdf.

the main app layout has already set to full size content.

@route(value = PAGE_ROOT, layout = MainAppLayout.class)
public class DashboardView extends Div implements HasDynamicTitle, BeforeEnterObserver, BeforeLeaveObserver {

public DashboardView() {
	PdfViewer pdfViewer = new PdfViewer();
    pdfViewer.setSizeFull();
    StreamResource resource = new StreamResource("example.pdf", () -> getClass().getResourceAsStream("/pdf/example.pdf"));
    pdfViewer.setSrc(resource);
    add(pdfViewer);    

    getElement().getStyle().set("height", "100%");
    getElement().getStyle().set("overflow", "hidden");
    getElement().getStyle().set("display", "flex");
    getElement().getStyle().set("flex-direction", "column");	      
}

[paodb]

Hello, I did some testing with the code you shared and for me the pdf is displaying okay. pdfviewer-issue9-test.zip
You could either use

getElement().getStyle().set("height", "100%");
getElement().getStyle().set("overflow", "hidden");
getElement().getStyle().set("display", "flex");
getElement().getStyle().set("flex-direction", "column");

or just add java this.setSizeFull(); to the view (div).

If the problems persists, can you modify the attachment to reproduce your issue?

Regards.

[weiliang2]

Hello,

I have added a simplified project in this link.

Download link
https://wetransfer.com/downloads/7a3cb125171608ca5e347497b117f9ec20220130151618/3ba521b44f54f381e1d07e5f7b4713b120220130151635/30c7c8

http://localhost:8082/

Managed to get a screen capture to this.

[ghost]

Good Morning,

I had the same problem with Vaadin 22.0.4. My initialize code for the pdf viewer is:

File pdfFile = new File(completePdfFilePath);

PdfViewer pdfViewer = new PdfViewer();
StreamResource resource = new StreamResource(documentName, () -> {
	try {
		return new FileInputStream(pdfFile);
	} catch (FileNotFoundException e) {
		logger.error("Failed to load the pdf document: " + e.getLocalizedMessage());
	}
	return null;
});
pdfViewer.setSrc(resource);

documentViewPage.add(pdfViewer);

completePdfFile -> Has the correct path to the pdf file in the file system. It is a absolute path.
documentViewPage -> Is a vaadin div container on a vertical layout in a tab

Edit: Add some screenshots. I had the problem if the pdf file outside the jar and under src/main/resources

[paodb]

Hello @weiliang2. I was able to isaolate the issue after a lot of testing in the project you shared. The problem is that pdf-viewer is conflicting with another dependency: qr-scanner because of extended Array.prototype (as you can see in your console log message). If I remove that dependency, the pdf displays correctly.

Pdf.js library (base library for pdf-viewer component) already provides a check for environments where the Array.prototype has been incorrectly extended (see https://github.com/mozilla/pdf.js/pull/11582/files). It seems that the qr-scanner base library (I believe is @granite-elements/granite-qrcode-scanner/granite-qrcode-scanner.js) incorrectly extends Array.prototype. As I'm not familiar with this component so I cannot tell for sure how it can be fixed.

(See another example where pdf.js doesn't work correctly because of another library mozilla/pdf.js#11412)

[paodb]

Hello @rwarnecke "Invalid PDF structure" is a different error. That error is shown when the library can't interpret the content of a PDF file. This should be handled in a separate issue. Is it possible for you to create a new issue and share a project reproducing the problem? Thanks.

[weiliang2]

Hello @paodb,

really appreciate the time you spend to investigate on this. I have verified its working by removing the problem dependency. Its is working now.

This component is super handy and is so important in every application. Everything we do involves a pdf. I strongly recommend this component should be a basic component.

Just 1 more thing. It would be really nice if the other buttons are also implemented.

Thanks once again.

[zlesak]

Hello, I have a similar problem, that the component is not showing anything else but the download button, which works correctly.

StreamResource src = new StreamResource("example.pdf", () -> getClass().getResourceAsStream("/154.pdf")); PdfViewer pdfViewer = new PdfViewer(); pdfViewer.setSrc(src); pdfViewer.setVisible(true); pdfViewer.openThumbnailsView(); ts.get().add(mainInfoTab,pdfViewer);
But when I try to add for example pdfViewer.openThumbnailsView(); the result is an error:

I tried to look in the generated FlowClient.js to see where the error on line 207 may be but:

I have also tried to remove some Maven dependencies, as you mentioned the qr-scanner, I have barcode4j, but no result with that. My other dependencies:

There is no other error or warning in browser console either in Idea console. Can the problem be with the pdf.js lib? I did not imported it, am I supposed to somehow import it on my own, or does it import the pdf viewer? Thank you very much for your time with helping with my problem.

[paodb]

Hello @zlesak, are you still having problems? if so, which Vaadin version & which version of the component are you using? You don't need to import the pdf.js library, just add the dependency for the add-on in your pom.xml. Keep in mind that the layout containing the pdfViewer might need to have full height in order to display correctly. If the error persists please create a sample project so we can take a better look and maybe it would be better to create a separate issue.

[weiliang2]

Hello,

sorry i have a new issue.
Screenshot 1: unable to find resource

Screenshot 2 unable to find resource.

Screenshot 3: URL was wrong.

is there any advise you can give me?

1. i was routing from another page to this, if i use a direct access to the url i dont have a issue. The report display correctly.
   withEventHandler("report", item -> UI.getCurrent().navigate(QuoteReportResultQueryView.class, parameter(item))));

Findings: based on my testing there are no issue with routing. But with a OptionalParameter. the url seems broken.

@OverRide
public void setParameter(BeforeEvent event, @OptionalParameter String parameter) {
if (parameter != null) {
System.out.print("URL Parameter: " + parameter);
if(StringUtils.containsIgnoreCase(parameter, "QuoteQtyID")){
String quoteQtyID = StringUtils.replaceIgnoreCase(parameter, "QuoteQtyID", "");
quotQtyIDFilter.setValue(quoteQtyID);
}
}
}

[paodb]

Hello @weiliang2 can you share what vaadin version and what version of the pdf viewer component are you using?

[weiliang2]

Hello

i am using vaadin 14.10.4. JDK version 8.
pdf viewer component 1.0.2.

[brunovianarezende]

Hello, I have a similar problem, that the component is not showing anything else but the download button, which works correctly. StreamResource src = new StreamResource("example.pdf", () -> getClass().getResourceAsStream("/154.pdf")); PdfViewer pdfViewer = new PdfViewer(); pdfViewer.setSrc(src); pdfViewer.setVisible(true); pdfViewer.openThumbnailsView(); ts.get().add(mainInfoTab,pdfViewer); But when I try to add for example pdfViewer.openThumbnailsView(); the result is an error:

I tried to look in the generated FlowClient.js to see where the error on line 207 may be but: I have also tried to remove some Maven dependencies, as you mentioned the qr-scanner, I have barcode4j, but no result with that. My other dependencies: There is no other error or warning in browser console either in Idea console. Can the problem be with the pdf.js lib? I did not imported it, am I supposed to somehow import it on my own, or does it import the pdf viewer? Thank you very much for your time with helping with my problem.

just for the record, I got the same error as this one ("this.__openSidebar is not a function") and it happened because the addon was not being inspected by vaadin when the application started and the frontend bundle was created. To solve this, I added com/vaadin/componentfactory/pdfviewer to the vaadin.allowed-packages property.

[weiliang2]

Do you mind sharing how you do it?

[brunovianarezende]

Do you mind sharing how you do it?

take a look here: https://vaadin.com/docs/latest/flow/integrations/spring/configuration