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 https://github.com/mozilla/pdf.js/issues/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.