I am currently working on embedding a PDF file into my website. I'm trying to hide the status bar, including download buttons and page numbers, through some clever techniques so that I can control them externally. My goal is to be able to redirect users to a different document when they attempt to download the file. Also, just in case it matters (for example, if a solution will only work with a specific framework), I am using React for this project.
While I have managed to set the active page of the PDF by manipulating the URL, I cannot seem to update the scroll position to reflect the current page number after loading.
To address this issue, I believe that placing the embedded PDF within a div that I can manage myself might be a viable solution. Essentially, I plan to set the height of the embedded object equal to the combined vertical height of all pages in the PDF, then enclose it in a div with a fixed height. This way, I should be able to track the document's scroll position and determine which page is currently being viewed.
<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>
My challenge now lies in setting the embedded PDF to match the full height of the document. While I know the total number of pages in the PDF upon initial load, figuring out how to adjust the height accordingly remains a puzzle.
So, how does one actually go about making an embedded object stretch to fit the entire PDF length, thus removing the need for scrolling within the embedded object and allowing an external scroll mechanism?
Edit: To offer a visual representation of what I am trying to achieve, I've included a diagram. In the second part of the image, everything outside of the div would be concealed but still scrollable.