321

I’m trying to convert XML data into PDF files from a web page and I was hoping I could do this entirely within JavaScript. I need to be able to draw text, images and simple shapes. I would love to be able to do this entirely in the browser.

8 Answers 8

542

I've just written a library called jsPDF which generates PDFs using Javascript alone. It's still very young, and I'll be adding features and bug fixes soon. Also got a few ideas for workarounds in browsers that do not support Data URIs. It's licensed under a liberal MIT license.

I came across this question before I started writing it and thought I'd come back and let you know :)

Generate PDFs in Javascript

Example create a "Hello World" PDF file.

// Default export is a4 paper, portrait, using milimeters for units
var doc = new jsPDF()

doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>

18
  • 16
    Did I partially inspire jsPDF? I learned about jsPDF the day you announced it. Looking great so far. I ended up going with Prawn as it's easily the best PDF generation library out there for my requirements. I would still love to do all of my work in-browser as I'm not positive I'll get Ruby on the system I'm deploying to. I'm watching jsPDF very closely. I would love to help out but my time is very limited. That might change in the future.
    – amoeba
    May 4, 2009 at 19:40
  • 11
    You did inspire it somewhat :), I was looking around on the internet to see if it already existed and saw that some people would find it useful. Let me know if you'd like to help out. I'm @MrRio on twitter.
    – James Hall
    May 7, 2009 at 9:22
  • 25
    It's still very much alive. 0.9.0rc2 Released today.
    – James Hall
    Apr 7, 2013 at 22:00
  • 113
    @JamesHall, I'd like to thank you for all the work it must be taking to write this, and for MIT licensing it to make the world a better place when you could have commercialized it for your own gain. Sep 26, 2013 at 14:58
  • 22
    Can downvoters offer us their "better" ideas or solutions? This is an excellent effort. Apr 28, 2015 at 21:20
167

Another javascript library worth mentioning is pdfmake.

The browser support does not appear to be as strong as jsPDF, nor does there seem to be an option for shapes, but the options for formatting text are more advanced then the options currently available in jsPDF.

5
  • 11
    This answer should be upvoted a lot more, pdfmake is so much more robust than jspdf. However just a side note, it is wrapper around PDFKit library.
    – vittore
    Apr 19, 2015 at 19:27
  • 4
    another side note, jspdf doesn't have utf-8 support and pdfmake has utf-8 support only for default fonts.
    – Leo
    Apr 5, 2016 at 7:21
  • "pdfmake.min.js - 0.1.22 - 9 hours ago" It is not dead, updated this day.
    – zenbeni
    Dec 23, 2016 at 15:43
  • 1
    From comparing the two playgrounds, to me it seems that jsPDF is more targeted at "graphic" PDF creation, whereas pdfmake is targeted more at generating well-formatted "plain" documents, it seems to have a lot more options for generic text formatting.
    – cslotty
    Dec 17, 2017 at 10:31
  • 1
    Is this IE friendly?
    – Wildhammer
    Jun 27, 2019 at 18:33
76

I maintain PDFKit, which also powers pdfmake (already mentioned here). It works in both Node and the browser, and supports a bunch of stuff that other libraries do not:

  • Embedding subsetted fonts, with support for unicode.
  • Lots of advanced text layout stuff (columns, page breaking, full unicode line breaking, basic rich text, etc.).
  • Working on even more font stuff for advanced typography (OpenType/AAT ligatures, contextual substitution, etc.). Coming soon: see the fontkit branch if you're interested.
  • More graphics stuff: gradients, etc.
  • Built with modern tools like browserify and streams. Usable both in the browser and node.

Check out http://pdfkit.org/ for a full tutorial to see for yourself what PDFKit can do. And for an example of what kinds of documents can be produced, check out the docs as a PDF generated from some Markdown files using PDFKit itself: http://pdfkit.org/docs/guide.pdf.

You can also try it out interactively in the browser here: http://pdfkit.org/demo/browser.html.

5
  • 1
    Isn't this a server side library? I think the discussion is on the client side js library. Mar 16, 2015 at 15:53
  • 12
    PDFKit works in both Node and the browser as mentioned in the answer. See the link to a browser demo. Mar 17, 2015 at 10:06
  • Does this compress images? I am working on a web app that functions similar to camscanner and I am looking for PDF creation through javascript to leverage the compression and multi page format.
    – Trevor
    Jul 4, 2017 at 14:47
  • @devongovett can you look at my question about your library?
    – ninbit
    Mar 15, 2019 at 20:41
  • I've been using PDFKit recently and although it has a few glitches it does work well and is very solid. I would recommend it. Jul 6, 2021 at 9:09
14

Another interesting project is texlive.js.

It allows you to compile (La)TeX to PDF in the browser.

1
  • 2
    The hello world example renders nicely but takes around 30s to complete.
    – Sam Sippe
    Jul 1, 2017 at 5:01
8

For react fans there is another great resource for PDF generation: React-PDF

It is great for creating PDF files in React and even let the user download them from the client side itself with no server required!

this is a small example snippet of React-PDF to create a 2 section PDF file

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

This will produce a PDF document with a single page. Inside, two different blocks, each of them rendering a different text. These are not the only valid primitives you can use. you can refer to the Components or Examples sections for more information.

3

It is worth mentioning PDF-LIB which is an awesome library:

  • Supports pure JavaScript.

  • Can edit existing PDF templates even with pure JavaScript. (Most impotently. Many JavaScript libraries can't do it)

  • It is generating a PDF with select-able/copy-able/highlight-able text not an image file inside an PDF like many other libraries generate.

  • More easy to use. (I love it) enter image description here

  • If you are interested in using it with pure JavaScript this may help.

  • If you are interested to do the same with the most popular JavaScript library as of now JSPDF this may help. (Simply JSPdf can't do most time saving thing we want, editing an existing template.)

See how pretty the code is

    <script type="text/javascript">
        async function downloadPdf() {

            const url = './print-templates/pquot-template.pdf';
            const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());

            // Getting the document
            const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes);

            // Getting the first page
            const pages = pdfDoc.getPages();
            const firstPage = pages[0];

            // Customer name
            firstPage.drawText('Customer name is here with more text (GAR004) quick brown customerm jumps over lazy dog.', {
                x: 10.5*9,
                y: 76.6*9,
                size: 10,
                maxWidth: 28*9, // Wrap text with one line. WOW :O
                lineHeight: 1.5*9
            });

            // Currency short code
            firstPage.drawText('LKR', {
                x: 10.5*9,
                y: 73.5*9,
                size: 10
            });

            var itemName = 'Here is the item name with some really really long text and quick brown fox jumps over lazy dog. long text and quick brown fox jumps over lazy dog:)';
            // Item name
            firstPage.drawText(itemName, {
                x: 5*9,
                y: 67*9,
                size: 10,
                maxWidth: 31*9,
                lineHeight: 2*9
            });

            const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
            document.getElementById('pdf').src = pdfDataUri;
        }

    </script>

2
  • 1
    As of today, it says the last version 1.17.1 has been released on Nov 7, 2021. It seems that it is not maintained any more... This may cause a problem if some security scan detects vulnerable dependencies (outdated versions). Also, it does not seem that bugs are fixed any more. Oh the joys of OSS that everyone uses (including big corps) but the maintainer(s) can't make a living off of it, even partially. (Yes, one could possibly fork and maintain, but is that worth it if PDF generation is only a small part of your work life?)
    – frIT
    Sep 22 at 10:44
  • I'm confused - this is linking to jsPDF the same as the top answer. Have they been merged or something?
    – scipilot
    Nov 22 at 6:39
0

HTMLDocs is probably the best way to do this in 2023. It's not a library but an end-to-end app.

Generate PDF files with HTML using htmldocs

Features:

  • Web UI / Overleaf-style editor
  • Support for all modern CSS features, including flexbox and grid
  • Simple API that you can call from any language
  • Jinja2 templating support built-in
  • Template library with many pre-made templates like invoices, resumes, certificates, etc.
  • Use JavaScript libraries like KaTeX and FontAwesome

Also has support for teams so you can easily share documents with design/marketing/non-technical folks.

-3

UPDATE: Free service no longer available. But there is a reasonably priced service you can use if you need something in a crunch and it's should be reliable.

https://pdfmyurl.com/plans

You can use this free service by adding a link which creates pdf from any url (e.g. http://www.phys.org):

http://freehtmltopdf.com/?convert=http%3A%2F%2Fwww.phys.org&size=US_Letter&orientation=portrait&framesize=800&language=en

2
  • 2
    Update: When I went to check this freehtmltopdf.com service it said it was no longer available. Sounds like it was amazing though! Aug 10, 2016 at 19:36
  • checked now - works. and it is amazing, i use a service where i pay for each pdf, and need to code, this is such a problem solver.
    – Sergey Sob
    Dec 26, 2016 at 17:16

Not the answer you're looking for? Browse other questions tagged or ask your own question.