Menu
I am embedding a PDF into my webpage. I'm doing some tom-foolery to hide the status bar (including the download buttons and page numbers) so I can control them externally (I want to be able to force a different download when they try to download the document). If it makes any difference (such as a solution that will only work/won't work given a framework), I'm using React.
I can set the active page of the PDF using a URL, but after the load of that page I can't get the scroll position of the document to update the page number.
I think a solution for this is to contain the embedded PDF in a div that I can personally control. To do this, I want the embedded object to have a height that is the sum of the vertical height of all of the pages of the PDF combined, and then encase that in a div with a set height. I can, from there, monitor the scroll position of the document to determine the current page.
<div class='encasing-div'>
<div class='toolbar'/>
<object data='some.pdf' type='application/pdf'>
<embed src='some.pdf' type='application/pdf' wmode='opaque'/>
</object>
</div>
I can't get the embedded PDF to be the full height of the document. I know the number of pages in the document on page load, but I don't know how/if I can use that to adjust the height properly.
How does one go about making the embedded object the height of the entire PDF, thus eliminating the scroll from the embedded object and allowing an external scroll to be used?
Edit: Here's a picture attemping to explain what I'm looking for. In the second part of the picture, the stuff outside of the div would be hidden but scrollable to.
794
well once i had the same probleme i figure it out like this and it solve everything for me hope it will help you too
<div class="PDfDiv">
<object data="some.pdf" type="application/pdf" height="100%" width="100%">
<param name="src"value="some.pdf" />
</object>
</div>
and in your CSS add this :
.PDfDiv{
height: 100vh;
}
You can use iframe instead of object & embed
<!DOCTYPE html>
<html style="height:100%">
<body style="height:100%">
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<div style="height:100%">
<iframe src="some.pdf" height="100%" width="100%""></iframe>
</div>
</body>
</html>
Rethink your solution. If you rely on the browser to display the PDF, you won't be able to get this to work in all cases. Every browser uses a different UI for displaying a PDF and they change... frequently. Instead, use something like pdf.js to control the display yourself. Then you can add and remove navigational elements as needed.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
