Delete pages and set footers to thumbnails about pdfjs-viewer HOT 5 CLOSED

Hi,

it is not possible to delete any page from the PDF as it is a viewer... or do you mean "hide" a page?

In the case of the footer for the thumbnails, you can define a handler that adds a div with the page number. If using the example in the bundle, it can be as next:

    onNewPage: function(page) {
        $('<div class="numbering">').text(page.pageNumber).appendTo(page);
        page.on('click', function() {
            if (!pdfViewer.isPageVisible(page.data('page'))) {
                pdfViewer.scrollToPage(page.data('page'));
            }
        })
    },

Then you can modify the CSS to make that the class for the pdfpage in the thumbnail makes room for the new div (e.g. add margin-bottom: 30px !important. And finally define the numbering class as:

.numbering {
  width: 100%;
  text-align: center;
  height: 30px;
}

This is an example... feel free to customize according to your needs.

I hope this helps.

Regards.

from pdfjs-viewer.

It would be useful to hide the page. How would that functionality be?

from pdfjs-viewer.

Hi,

hiding and showing a page depends a lot on your UI. The basic idea is to add a class that hides the pages and/or the thumbnails and to add or remove that class to the pages that are being hidden.

As an example, you can use this function:

function hideselected() {
    let $selected = pdfThumbnails.$container.find('.selected');
    let i = $selected.data('page');
    $selected.toggleClass('hidden');
    pdfViewer.$container.find('.pdfpage[data-page="' + i + '"]').toggleClass('hidden');
    pdfViewer.scrollToPage(i);
}

And adjust the different classes to show or to grey the pages.

I have added a new commit that includes the features that you suggested, in the example. You can see in that example that you need some little changes in your code.

Please try this new version in commit #4b89dbd8e9d2c2ff5e1c1bcc83d10239add96d5f

from pdfjs-viewer.

Hi Carlos,
I thank you in advance for the support you have given me. I am here again looking for a solution that my user requires. I have been asked to make the thumbnail view smaller. I have been reviewing and understand that the size adjusts to the resolution of the screen and I have not been able to establish a fixed size. Can you tell me how to achieve it?

from pdfjs-viewer.

I do not know what you mean exactly, but I think that you can try forcing the size for your images using CSS. In the example https://codepen.io/dealfonso/pen/dyVVYgP, you can try adding the next to the CSS:

.thumbnails .pdfpage {
 width: 100px !important;
}

from pdfjs-viewer.