Comments (5)
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.
Related Issues (10)
- pdf.js version update HOT 1
- onActivePageChanged and getActivePage() not working ? HOT 1
- The viewfinder image is distorted. HOT 3
- Loading PDF as URL HOT 2
- Get annotations in div without PostMessage HOT 1
- How use pinch to zoom in/out pdf doc HOT 1
- Adding Find to the viewer HOT 3
- Print feature HOT 3
- Pixel Ratio causes crashes on iPads HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pdfjs-viewer.