After clicking on a link it opens up PDF in a new tab in chrome. The PDF can contains more than one page. The PDF is inside an <embed> tag . What I want to achieve is by using either javascript or jQuery to be able to scroll the PDF in developer's tool console of chrome browser. When I click right on page, I can't see the source code.
I tried using
window.scrollBy(0,200)
window.scrollTo(0,200)
but javascript doesn't seem to work. The source of the pdf is something like below
<html>
<BODY>
<EMBED ID='ID' SRC='URL.PDF' TYPE='application/pdf' internalinstanceid='5'></EMBED>
</BODY>
</HTML>
Is there any other method or way through which I can achieve to scrolling through the PDF? Is there any mand which I can enter in chrome's developer console which will scroll through PDF?
After clicking on a link it opens up PDF in a new tab in chrome. The PDF can contains more than one page. The PDF is inside an <embed> tag . What I want to achieve is by using either javascript or jQuery to be able to scroll the PDF in developer's tool console of chrome browser. When I click right on page, I can't see the source code.
I tried using
window.scrollBy(0,200)
window.scrollTo(0,200)
but javascript doesn't seem to work. The source of the pdf is something like below
<html>
<BODY>
<EMBED ID='ID' SRC='URL.PDF' TYPE='application/pdf' internalinstanceid='5'></EMBED>
</BODY>
</HTML>
Is there any other method or way through which I can achieve to scrolling through the PDF? Is there any mand which I can enter in chrome's developer console which will scroll through PDF?
Share Improve this question edited Mar 15, 2018 at 10:24 Niar asked Mar 15, 2018 at 9:42 NiarNiar 5402 gold badges11 silver badges25 bronze badges2 Answers
Reset to default 4In short you can't - A PDF is not a DOM element it is a document that is rendered by a special PDF reader in the browser. Each browser has its own mechanism for rendering PDFs and there is no way to programmatically control them like you want.
At best you can skip pages like using something like so (presuming your embed is the first on the page)
var x = document.getElementsByTagName('embed')[0]
x.src = "url/to/your.pdf?page=page_number"
This will cause the embedded PDF to navigate to page_number
Edit:
You could (theoretically) achieve this if you could use an old browser that still has support for an NPAPI PDF plugin - then you could simulate arrow key presses that would allow you to scroll through the document. However in all modern browsers this isn't possible as you can't trigger keyevents without some kind of user interaction (for really good reasons!).
While at the moment you cannot make a cross browser solution, because how pdfs are rendered is not part of a standard, chromium based browsers (chrome, edge, opera, etc.) wrap the pdf displaying plugin with elements that enable some interaction with it using the DOM.
Around the embed tag you found chrome builds some divs using a web-ponent for the GUI including the scrollbar! And guess what happens when you scroll this container?
let scroller = document.getElementsByTagName('pdf-viewer')[0].shadowRoot.getElementById('scroller')
scroller.scrollBy(0,200)
I suspect this is part of Chromes Initiative to explain browser behavior that was part of the web-ponent move