Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

wkhtmltopdf internal links

I am using wkhtmltopdf to generate reports from my html templates, i am trying to generate an index for the output PDF.

The thing is that I want to achieve similar functionality to the indexes of microsoft word.

For this purpose I need to use several internal links among the document, so when clicking in the index of the PDF, it goes to page 10 for example.

Any clues about how to achieve this?

I am using wkhtmltopdf version 0.11.0 rc2 in Windows, but sooner or later I will have to move it to linux so I need a compatible solution among operating systems.

Thanks a lot in advance.

like image 705
antonio_Developer Avatar asked Nov 27 '13 12:11

antonio_Developer


3 Answers

I got the solution by my self, but i just haven't check compatibility with Linux.

For achieving the internal links you add in the html:

Target of the Link:

 <a name="name_of_target">Content</a>

Link to the Target:

 <a href="#name_of_target">Link Text</a>

It works perfectly when converted to pdf.

like image 149
antonio_Developer Avatar answered Sep 21 '22 08:09

antonio_Developer


It can be tricky. E.g. invisible (empty) links don't work as targets. Also, the structure seems to matter and not all valid html5 layouts work. E.g. I found that while this works:

<h2><a name="name_of_target">Target</a></h2>

this does not:

<a name="name_of_target"><h2>Target</h2></a>

Despite both being perfectly valid (in html5). (I'm using version 0.12.6.)

like image 22
atleta Avatar answered Sep 17 '22 08:09

atleta


I had the same issue with wkhtmltopdf

wkhtmltopdf 0.12.2.1 (with patched qt)

with debian 9 installed with the package.

wkhtmltox-0.12.2.1_linux-jessie-amd64.deb

I enabled the internal links with the command option

--enable-internal-links

I used the target:

 <a name="name_of_target"><div><img src="image.png">Content</div></a>

and the link

 <a href="#name_of_target">Link Text</a>

But still not working, other link in the document worked well. Then I replaced the div with a span and it worked.

 <a name="name_of_target"><span><img src="image.png">Content</span></a>

The issue is related with the display block rule of div elements. When I added display block rule to the span the link not worked again.

like image 26
caiofior Avatar answered Sep 18 '22 08:09

caiofior