How to add text on top of an existing PDF using JavaScript on a website?

Question

I am looking for a way to add text on top of an existing PDF using JavaScript. I envision it as a user clicking a button to download the PDF and receiving a file with this original PDF and additional text written over the pages.

Is there any way this could be possible?

It is important to use an existing PDF to preserve the original designs on it, and the PDF also includes text specially typeset in different typefaces and a wide range of unicode glyphs.

It is also important to generate this text onto the PDF from a webpage as each text generated will be slightly different, creating a unique PDF for the end user.

I have been researching this topic online and have found the jsPDF library, but that seems to only generate PDFs, not write on top of existing PDFs, and the content I need on the PDF is too complex to use jsPDF to generate it all. I do not want to use the existing PDF as a background image if I do not have to.

I also found some backend libraries like PDFKit but would like to avoid using a backend library if at all possible — and it also doesn't seem to write over existing PDFs.

I saw some things about text-fields online, but had trouble making sense of if this would be a feasible path to take — could it be possible to add text fields in the PDF and then insert text into those fields from a webpage before the user downloads it?

Thank you very much.

Answer 1

I guess you can convert your PDF file to html or at least draw it on a canvas at this point. If you can, you can use jsPDF to add overlay html on top of existing html to generate a new PDF file.

var doc = new jsPDF();

doc.addHTML(document.body, function() {
    doc.text(20, 20, 'Hello world!');
    doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
    doc.addPage();
    doc.text(20, 20, 'Do you like that?');
    printData();
});

printData = function() {
  var str = doc.output('datauristring');
  console.log(str);
  // window.open(str);  Optional
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>


<div id="mypdf">
  <div>
    My Pdf Content Here
  </div>
</div>