LayoutMode Not Working

PDF.js Express Version
7.0.0

Detailed description of issue
When setting up layoutMode to be Facing or FacingContinuous, we are still seeing the document setup using Single Page.

Expected behaviour
When the document is opened and loaded, the document should be side by side with the pages, not single page scrolling.

Link to document
Sorry, all documents are behind a login that we cannot provide to third parties.

Code snippet
UI version: 7.0.0
Core version: 7.0.0
Build: Ny8yNy8yMDIwfGU4NWY2OTY=
WebViewer Server: false
Full API: false

Please let me know if you need any additional information from me!

Hi!

Could you please provide a code snippet showing how and when you are setting the layout mode.

Thanks!
Logan

 initPdfViewer(event, instance, modalElement) {
    let clickedElement = event.currentTarget;
    let pdfUrl = clickedElement.dataset.pdfUrl;
    let activityId = clickedElement.dataset.activityId;
    let title = clickedElement.dataset.title;
    let layoutMode = clickedElement.dataset.layoutMode;

    // actions before modal load
    modalElement.querySelector('.modal-title').innerHTML = title;
    $(modalElement).modal({backdrop: 'static'});

    if(layoutMode !== '') {
        instance.setLayoutMode(layoutMode);
    }
    instance.enableFeatures([instance.Feature.Download]);
    instance.loadDocument(pdfUrl, {
        'documentId':activityId,
        'extension':'pdf'
    });
}

WebViewer({
        licenseKey: this.pdfJsLicenseKey,
        path: '/includes/pdfjs', // point to where the files you copied are served from
        disabledElements: [
            'toolsHeader',
            'ribbons',
            'selectToolButton',
            'toggleNotesButton',
        ]
    }, pdfViewElement).then((instance) => {
        let elementList = document.querySelectorAll('.init-pdf-inline');
        for (let a = 0; a < elementList.length; a++) {
            elementList[a].addEventListener('click', (event) => {
                event.preventDefault();

                let self = this;
                instance.closeDocument().then(function(){
                    self.initPdfViewer(event, instance, pdfModalElement);
                });

            }, false);
        }
    });

We are using all possible config options from a column in our DB.

Cover
Continuous
Facing
FacingContinuous

Hey there!

I cannot reproduce your issue in 7.1.2.

Can you please make sure that the value of layoutMode is what you expect it to be? Also if you’re able, try upgrading to 7.1.2.

Let me know if you still have issues.

Thanks!
Logan

We will try upgrading and see if that resolves the issue. The layoutMode seems to be being set fine, we did notice the values did change for layoutMode at some point recently in your library.

1 Like

Unfortunately upgrading to 7.1.2 did not resolve this issue for us. Could it somehow be the document itself? It seems to only happen with certain PDF documents, not all within our website.

Hmm its a bit hard to tell. Are there any errors in the console when it doesn’t work?

It sounds like it could also be a timing issue somewhere. Can you try calling setLayoutMode inside the document complete event?

instance.loadDocument(pdfUrl, {
        'documentId':activityId,
        'extension':'pdf'
    });

instance.docViewer.one('documentLoaded', () => {
   if(layoutMode !== '') {
        instance.setLayoutMode(layoutMode);
    }
})

Thanks,
Logan

Moving setLayoutMode into the documentLoaded listener solved our problem! We used what was the README on how to implement the pdf viewer. It may be helpful to others who have larger PDF documents to use the documentLoaded.

Thanks for the help! If anything else comes up with this we will reply on this thread.

Screen Shot 2020-10-28 at 3.19.12 PM

We are seeing these new js errors with the upgraded version, but nothing seems to be breaking…such as the page or document.

This is a known issue and will be fixed in the next release!

Thanks,
Logan

1 Like