• Home

  • Custom Ecommerce
  • Application Development
  • Database Consulting
  • Cloud Hosting
  • Systems Integration
  • Legacy Business Systems
  • Security & Compliance
  • GIS

  • Expertise

  • About Us
  • Our Team
  • Clients
  • Blog
  • Careers

  • CasePointer

  • VisionPort

  • Contact
  • Our Blog

    Ongoing observations by End Point Dev people

    Generating PDF documents in the browser

    Kamil Ciemniewski

    By Kamil Ciemniewski
    March 15, 2013

    What you will learn

    • How to generate PDF documents in the browser with JavaScript
    • How to generate them out of normal HTML
    • How to open those PDFs in new windows
    • How to render them inline inside the DOM

    Introduction

    Every once in a while as web developers we face the challenge of providing PDF documents for the data we have persisted in the database.

    The usual approach is to:

    • generate the document with a library / DSL in the language of the backend
    • or—​generate normal html view and use a utility like wkhtmltopdf

    That works nice, but what if you’re developing an SPA app which only consumes JSON data from its backend? Imagine a scenario when the backend isn’t capable of producing responses other than JSON data. What could you do there?

    The solution

    Thanks to some very bright folks behind the jsPDF library we have both above mentioned options right inside the browser.

    I strongly encourage you to visit their website. There is a nice live coding editor set up which reflects in real time the PDF your code is producing.

    Using the DSL

    The whole process looks like this:

    # 1. create jsPDF object:
    doc = new jsPDF()
    
    # 2. put something interesting in there:
    doc.setFontSize(22)
    doc.text(20, 20, 'This is a title')
    doc.setFontSize(16)
    doc.text(20, 30, 'This is some normal sized text underneath.')
    
    # 3. choose some useful outlet:
    doc.output('dataurlnewwindow', {})
    

    Where is the documentation?

    One thing I didn’t like about the experience which was really great otherwise, was the fact that you could browse the Internet for hours without luck, looking for some useful docs for the library.

    For all of you who don’t know the shortcut yet, here it is:

    git clone https://github.com/MrRio/jsPDF.git
    

    And in the doc directory you will find nicely generated docs out of the project sourcesvery neat!

    Can I generate it just from HTML?

    Yes you can. On the project’s website the authors are warning us that this feature is still experimental. But I have to say that last time I used it, all went well and the code produces nice PDF to this day (yay!).

    doc.fromHTML $('.report_web').get(0), 10, 10,
      'width': 170,
      'elementHandlers': 
        'LI': (el, renderer) =>
          if renderer.y > 250
            doc.addPage()
            renderer.y = 10
          else
            renderer.y += 10
          false
        'H1': (el, renderer) =>
          doc.setFontSize(14)
          doc.setFontStyle('bold')
          doc.text($(el).text(), 10, renderer.y)
          doc.setFontSize(12)
          doc.setFontStyle('normal')
          true
    doc.output 'dataurlnewwindow', {}
    

    Take a look at the code above. #fromHtml method takes the DOM element, margins, and a hash of options. From my experience the elementHandlers attribute seems to be mandatory (I got errors without it).

    Every element handler is just a pair of capitalized tag name and the function which takes DOM element and the renderer context.

    The renderer variable contains data of the current paragraph, the pdf internal object, settings object and x and y. You have to remember to change x and y variables yourself after creating some content.

    One last thing to remember is that the handler can return either true or false. If it returns true, then the engine will not create content out of the given DOM element on its own. Otherwise, after your handler finishes its execution, the engine will generate the content for you. So you can use those handlers to munge a few things in the output document or you can take over the whole control and do it your way.

    Open PDF output in a new window

    You may have notice in one of above examples, that we were simply creating new windows with PDF documents there.

    To recap, opening PDF documents in new window:

    doc.output 'dataurlnewwindow', {}
    

    Render PDFs in the DOM

    Nesting the PDF document inside the DOM seems way cooler. To do so:

    data = doc.output 'dataurlstring', {}
    $('#report').html "<iframe src='#{data}'></iframe>"
    

    You will notice that the #output method takes a string which tells it how you’d like to generate the PDF. If you specify the ‘dataurlstring’ it will return a string containing the url data you use in your iframe. That is how the last example works.

    There is much more to jsPDF than shown in this short post. If you’re interested, you can browse the docs included in the projects repository. There are a lot of useful methods for creating almost any type of document you would want.

    javascript pdf


    Comments