Delete pages and set footers to thumbnails

[gerryToledo]

Hello dealfonso,

I would like to know if you have an example of how to delete a page from the PDF, as well as how to set a footer for the thumbnails.

[Carlos de Alfonso Laguna]

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.

[gerryToledo]

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

[Carlos de Alfonso Laguna]

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

[gerryToledo]

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?

[Carlos de Alfonso Laguna]

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;
}