javascript - Unable to select text from pdf

Question

I am making a simple react application for pdf generation.

Libraries used:

-> jspdf

-> html2canvas

index.js

JSX:

<div className="App">
  <button onClick={exportToPdf}>Export</button>
  <div id="toRender">
   ------ Pdf print content ------
  <div>
</div>

PDF Export function:

  const exportToPdf = () => {
    let elem = document.getElementById("toRender");
    elem.scrollIntoView();
    h2c(elem).then((canvas) => {

    ---- Logic for exporting pdf ---

    })
  }

For complete code please refer the below working snippet.

Issue:

The issue is that if we click on export button, then the pdf gets downloaded but we are unable to select the text from the pdf .

I could understand the reason, that it happens because we are using addImage() in this line,

  pdf.addImage(img, "PNG", 0);

But while searching for the related issues here https://github.com/MrRio/jsPDF/issues , I couldn't get anything helpful..

Requirement:

Expectation is that the downloaded pdf is currently looks like an image because of which user unable to select any text from pdf and the need is that user should be able to select the text from pdf.

I am okay to implement any other library to make the html to pdf generation with selectable text as well..

Kindly someone please help me to generate pdf with selectable text instead of image for the above given example. Thanks in advance.

Answer 1

Waitting for answers