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.

Helbona

I have no experience in this field but the first thought is a markdown editor like pagedown used here on StackOverflow for formatting questions. It has plugins for generating pdfs instead of html but they are likely to require a serverside script – Woolsey

I don't know of any JavaScript libraries that allow you to do this but as you found there are plenty of server-side libraries and they work really nice and exactly as expected. iText (Java) and iTextSharp (.Net) are two that I personally know would do exactly what you're looking for. – Knox

Hey bud, you didn't mention anything about server support. Where I work, we create custom .pdf report based on variables sent up to our Rails server. I can see having something similar where you layer the existing .pdf and the input text into a single merged .pdf. We can get crazy if this is an option. – Poorly

Are you saying your requirement is to do this in the browser with javascript? I have accomplished this exact thing many times but I relied on my server runtime to fake it out. (IIS, or something that executes before spiting out the final pdf stream to the user.) Then all the 3rd party tools for your server environment can be used, even if the pdf is on a server and out of your control you can do this by adding a pdf layer and adding your text or graphics. I usually add it to a new layer. Get the Original PDF DPI resolution and do not assume all pdfs have the same resolution and scale. – Tendentious

@taystack, in my particular case, LAMP(PHP) & The way I do it now is . . . generate charts via JS on client, convert to canvas, convert to BASE64, send to server, which converts BASE64 to PNG. Server uses TCPDF library + FPDI to use an existing PDF as a template + adds images + text on it, sends it back to client. I was looking to get away from insanity and use purely JS approach. – Devitalize

@sql, yes, essentially. Purely-JS approach to build PDFs, because my requirements are: 1) ability use JS library for charts that are to go on the final PDF., and 2) ability to have an existing PDF as a template. i.e. in one sentence, "create a multi-page PDF with existing PDFs as underlying templates with JS-based charts". – Devitalize

another logic is create screenshots of every page and use that as background image of new pdf with the content u want to overlay it – Bistre

Answer 1

https://pdf-lib.js.org/ library supports modification of existing PDF file.

const pdfDoc = await PDFDocument.load(...)
const pages = pdfDoc.getPages()
pages[0].drawText('You can modify PDFs too!')
const pdfBytes = await pdfDoc.save()

Emilemile

Thank you for this answer. So wonderfully solved the issue I was having. Chef's Kiss – Trepang

Answer 2

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>

Fission

I get an error with the example TypeError: elements is null; elements = (elements.length) ? elements : [elements]; html2canvas.js (line 2660, col 9). But are you saying that if I can convert the PDF into HTML then I can reuse that HTML and add to it using the method above? In my case, the PDF is a vector-based CAD Drawing that can be zoomed and viewed or printed at any magnification. Converting that to a canvas may prove to be bad (I used to have those drawings as an image file before and when zoomed, it suffered from bad image artifacts) – Devitalize

I guess in my case I will have to convert PDFs in question to something else first if I want traction. But keeping it as a PDF so far is the path of 'least resistance' – Devitalize

Even with this method, in the end html is converted to image and printed on top of pdf. There is loss of quality on printed html with this method. I guess you can parse html and write text and images yourself onto pdf. But vector images are out of question. What you need is a full functional pdf creation library. Sorry that I am not aware of any such client side libraries. – Fission

awarding bounty, cuz. – Devitalize

Answer 3

Found this solution. Sorry, but it does involve doing some work on the server side. :)

It involves

1. Convert pdf to html using pdf2htmlEX.

2. Manipulate the html however you need to. You could probably use cheerio for easier dom manipulation.

3. Convert the html back to a pdf using something like jspdf.

More about it here.

Capability

Answer 4

PDFs are read only, so once they're created they cannot be edited, only read. There is no way to do this via any program never mind Javascript, other than generating the pdf completely over from scratch using the same steps used to create the first one.

Calder

This is not entirely true. There are many programs and libs allowing you to stamp extra content onto existing PDFs. I don't know whether existing js code allows that, though. – Runty

To further what @Runty said, directly from the spec: 7.5.6 Incremental Updates: The contents of a PDF file can be updated incrementally without rewriting the entire file. – Knox

I've also looked into this further and agree with mkl and Chris Haas. There are indeed many ways to stamp text atop a PDF! Thank you for your help. – Helbona

This is not true, there are several libraries available in javascript with their help you can achieve that. – Denunciatory