0

I have used PDFKit to generate pdf from html. But is there a way to navigate to nth page on click of an section(box element) on the page ?

Generate PDF:

content = PDFKit.new("#{header_html}<div class='pdf_image'><img src='data:image/svg+xml;base64,#{ Base64.encode64(chart1.read).gsub("\n", '')}'></img></div>
                                    <div class='pd_image' style='margin-top: 10%; page-break-after: always;'><img src='data:image/svg+xml;base64,#{ Base64.encode64(chart2.read).gsub("\n", '')}'></img></div>
                                    <div class='pdf_image' style='margin-top: 10%;'><img src='data:image/svg+xml;base64,#{ Base64.encode64(chart3.read).gsub("\n", '')}'></img></div>",
                                    orientation: 'landscape', margin_top: '0.2in', page_size: 'Letter')
send_data(content.to_pdf, filename: "all_charts.pdf", type: 'application/octetstream', disposition: 'inline')

Clicking on Box1 would do navigate to Page1 (current page).

Box 2 --> Page2

Box 3 --> Page3

Attached image explains what needs to happen.

enter image description here

swapab
  • 2,402
  • 1
  • 27
  • 44

1 Answers1

1

Those are called as internal links.

Achieved with:

<a href='#box_1'></a>
<div name='box_1'></div>

Respectively for all boxes.

The only hurdle was with wkhtmltopdf enable internal links.

Community
  • 1
  • 1
swapab
  • 2,402
  • 1
  • 27
  • 44