Support hyperlinks in html()

I’m running jsPDF 2.3.1 to render PDFs from HTML. I am able to generate PDF files, but hyperlinks are not always rendering correctly.

Here are two examples:

<a href="https://github.com">https://github.com</a>

<a href="https://github.com">GitHub</a>

The first example generates a clickable link in the PDF (good), while the second example just colors the text blue with no hyperlinking (bad).

Here’s the code I’m using to generate this:

const doc = new jsPDF('portrait', 'pt', 'letter');
const fullDocBody = '<a href="https://github.com">GitHub</a>'; 
doc.html(fullDocBody, {
  // Callback function is called when html conversion to PDF completes
  callback: function (doc) {
    doc.save('test.pdf');   // Saves to a file
  },
  x: 60,
  y: 60
 });

Changing fullDocBody to one of the two link strings shown above will demonstrate the behavior I am describing.

My application needs to accept either link type, as it is taking HTML from a rich text editor component to render the PDF.

Thanks for your time.

[rd0rnot]

@HackbrettXXX - thanks for looking at those files and confirming your earlier comments. I appreciate the quick response.

@joseDaKing - No, I haven’t found a convenient way to overcome this. I think one possible solution would be to write logic to parse the HTML and directly write content using the jsPDF API instead of relying on the .html() method. As I understand it (and I could be mistaken), .html() uses the html2canvas library to internally render the content and takes a “screenshot” of that rendered page to produce a PDF.

For my team, we will likely see if we can purchase an off-the-shelf PDF component. I think jsPDF is great, but generating a document from HTML doesn’t work the way we would need it to.

[Uzlopak]

Maybe if you take the onClone method as in #3178 and we do a .link() in that rectangular instead of an .addImage()?

Potentially an issue would be, that link is expecting the coordinates on the current page, so if you want to print on multiple pages, we would need to modify .link() it.