in HTML, a link with an 'Href' attribute '#overview' would scroll down to the element that has the word 'overview' as its 'ID' attribute.
my question is, how can i create a link inside a pdf that can point to a specific part of that pdf, without using any software(like adobe acrobat) and by pure coding(HTML, javascript or php)?
(the html page works fine with the anchor. i did export the html as pdf by using 'html2pdf' library but it is not scrolling down.
CodePudding user response：
If you are intending to target a specific element this would require two lines of code. First, creating the link using href:
<a href="#Chapter1">Lorem</a>
Second defining the target to the link using <a name>:
<a name="Chapter1">Lorem ipsum</a>
This approach however, will only work if the PDF is opened in the browser. If you attempt to use the PDF through any reader, you will get an error stating There is no application set to open the URL
Therefore, if the intended use case of your application is for out-of-browser use of PDFs, I'd recommend installing the pdf-internal-link npm library, using npm i pdf-internal-link. Instructions on how to use it are available here
CodePudding user response：
The location overview (your target) can be one of multiple destinations inside the PDF, so it could be
- an "outline" entry, commonly called a "bookmark" as often seen in a navigation sidebar, internally it will hyperlink to a fixed XY position in a page such as a sub heading, but could be a single character or word.
- a "Named-Destination" this is often confused with a bookmark, since it is often a similar usage, the prime difference is it is "hidden" so could be anywhere including a visible object like a word. It must be unique and a name without spaces. This is the one used for url fragment http..../filename.pdf#nameddest=overview
- a "goto" of several formats such as http..../filename.pdf#page=9&comment#### (this one is not supported by most browsers) most useful is either
zoom=scale,left,toporviewrect=left,top,wd,ht(a viewport). The support for these varies but are not commonly used by all browsers.
For Mozilla support see https://github.com/mozilla/pdf.js/wiki/Viewer-options
Thus your requirement
"scroll down to the element that has the word 'overview' as its 'ID' attribute."
needs an external URL with an internal hidden "NamedDestination", and many PDF utilities and SDKs can alter a PDF internally to append that hidden pointer, but to do so require rewriting the PDF Trailer.
In javascript you could attempt to write a fresh BLOB file to merge the whole of the existing PDF then binary write your Named Destination then binary rewrite the decimal trailer in a few lines of code. However there are PDFs that are not that simple to incremental write, so your library would feature creep up to the level of most 3rd party tools.
You asked for other methods such as PHP.HTML and strictly that is down to users browsers supporting either zoom=scale,left,top (Most Chromium, Some Mozilla, Probably NOT Edge or iOS but the posts keep shifting) or Now Defunct Internet Explorer viewrect=left,top,wd,ht