Home > Software engineering >  Internal link deleted after downloading PDF with html2pdf in Vue JS
Internal link deleted after downloading PDF with html2pdf in Vue JS

Time:11-01

I am using Vue JS and html2pdf to download dynamic content. When i am trying to link to a div inside my component with an anchor tag it's working perfectly on my local.

But when i download the document there is a link in the document but it's not scrolling to my supposing div.

I would like to know to if it's possible to do this?

<div id="app" ref="document"> 
   <a href="#test">
      Jump to the part of the page with the “test” id
   </a>
   <div  id="preview">
      <div >
         <p id="test">blablabla.....</p>
      </div>
   </div>
</div>

My function to export the pdf:

 async exportToPDF() {
      await html2pdf(this.$refs.document, {
        margin: 1,
        filename: "document.pdf",
        image: { type: "jpeg", quality: 0.98 },
        html2canvas: { dpi: 192, letterRendering: true },
        jsPDF: { unit: "in", format: "letter", orientation: "landscape" }
      });
    },

It is possible still have the same link who is going here the the div with the id="test"?

At the end i would like to make a table of content in a dynamic way.

Thank you for reading :)

Have a nice day!

CodePudding user response:

I believe there should be enableLinks option available in html2pdf library. Something like this:

Ref: https://ekoopmans.github.io/html2pdf.js/#options

html2pdf(element, {
    enableLinks: true
    // ... other options
});

CodePudding user response:

Thank you for reply. After looking online and check different code i didn't find any solution. Normal links are working but not internal links even with enableLinks!

I am not sure it's possible.

  • Related