How to convert HTML to PDF with Bookmark

Question

I am trying to save a customized html file as a pdf.. normally I would press ctrl-P at my browser (chrome) and print as pdf..

But when I open the pdf file, there is no bookmark tab on the left side of the pdf reader (adobe)..

What I want is to save an html file as a pdf and the bookmark should appear in the left side of the pdf reader:

I created the html file.. I added links to some parts of it using id and hyperlink:

<a href="#part1">part1</a>
...some codes here...
<div id="part1">

and it works, but I don't know how to create a bookmark in pdf from an html... normally ms word or libre office can convert their documents to pdf with a bookmark..

But how can I made a pdf with a bookmark using HTML?

Answer 1

The bookmarks in html input document are set like this:

<a href="#bookmark1">.... </a>
...
...
...
<h1 id="marcador1"> Chapter 1 </h1>
...

Answer 2

Don't use chrome, although it is simple to convert a web page to a PDF file. If you want pdf bookmarks, you can try microsoft word (2010). Just save the web pages to local, and open it with MS word 2010, then save it as pdf. The bookmark is there. see also: https://www.w3.org/TR/WCAG20-TECHS/PDF2.html

Answer 3

App comparison for converting PDF (regarding bookmark & internal hyperlink)

I did some tests for different app, (results may not be accurate due to personal settings / mis-used)

	pdf bookmark	internal hyperlink	downloaded as .htm	file format looking
Chrome (print as PDF)	N	Y	N	looks same as the webpage
Calibre	Y	N/Y	Y	looks same as the webpage
Print Friendly & PDF 2.8.1 (Chrome Extension)	N	Y	N	syntax color is changed
WPS docx	N/Y	N	Y	format is changed a lot
Foxit PDF	N	N	Y	looks same as the webpage
Adobe PDF	N	N	Y	looks same as the webpage
MS Word docx
Adobe PDF (Chrome Extension)

annotation:

• pdf bookmark = contains bookmark in PDF file
• internal hyperlink =
  • Y = the web hyperlinks inside jumps to the position in the PDF internally
  • N = the web hyperlinks inside opens an external web link in your browser
• downloaded as .htm =
  • Y = the webpage is downloaded as .htm then converted to PDF
  • N = the webpage is directly converted in Chrome browser
• file format looking

  • (Though I said "looks same as the webpage", its not "exactly" same as the webpage -- you need to config the settings when you convert.

    Also some minor parts / components of the webpage may or may not be contained in the PDF.)

Calibre Usage

To use Calibre _{^{(As shown, Calibre contains the bookmark. But it doesnt have internal hyperlink.)}}

1. webpage is downloaded as .htm (along with a folder)
2. drag the .htm into Calibre, it becomes a .zip file
3. use Convert books to convert .zip to .pdf
4. You may need to set up the bookmark detection mechanism in Convert books > Table of Contents if Calibre doesnt detect it.

• Calibre is highly customizable on the conversion
• (wish I know how to solve the issue of "not having internal hyperlink" directly inside Calibre, without going through HTTrack)

To use Calibre, with HTTrack to add internal hyperlink:

1. use HTTrack to download the webpage

   (with depth of level of 1 (--ie: just current webpage), should be enough)

   (you may need to config it so that it captures external files like images / syntax-format files)

2. drag the index.html into Calibre ... (proceed same as [2~4] above)

   (you need to enable the option of creating the index.html)

WPS docx Usage _{^{(not recommend)}}

1. webpage is downloaded as .htm (along with a folder)
2. save as .docx
3. output as .pdf (enable the option convert title style format to bookmark)
4. (if no title style format is detected, that may due to the title are actually in the style format of hyperlink style format, you need to manually remove all those hyperlink style format.)

_^note

• testing subject weblink is this ; (testing result PDF are not posted here)

• Again, I could be wrong -- results may not be accurate due to personal settings / mis-used

  Personally, I believe big companies like Adobe should have such functionality to include bookmarks in PDF. It just I dont know how to do it...