Use PhantomJS to render PDF in Rails

README.md

Use PhantomJS to render PDF in Rails

Avoid disk IO

If you're deploying your app to somewhere where you can't be sure to have reliable disk read/write access, the normal strategy of writing to a temp-file doesn't work. Instead we can open a pipe to the Phantom.js process, and then pass in the HTML via stdin, and then have the rasterize.js script write out the resulting PDF to stdout, which we can then capture. Any log messages from the Phantom.js process can be passed via stderr if we want.

Session heist

If we're using the default Rails setup for session handling, i.e. a _session_id cookie, we can just pass in the session ID and have the rasterize.js script fake a session cookie.

Configuring Phantom.js

We can provide some additional configuration for the Phantom.js process using a config.json file. (I can't remember exactly why we set the things as we did, but some of them were needed.)

config.json

{
  "diskCacheEnabled": true,
  "webSecurityEnabled": false,
  "ignoreSslErrors": true,
  "localUrlAccess": true,
  "localToRemoteUrlAccessEnabled": true
}

pdf.rb

# lib/phantomjs/pdf.rb

require "phantomjs"

module Phantomjs
  def self.pdf(html, request)
    Phantomjs::PDF.new.render(html, request)
  end

  class PDF
    def render(html, request)
      url = request.url
      session_id = request.session.id
      ActiveSupport::Notifications.instrument("render_template.action_view", identifier: rasterize_js) do
        open(%(|#{Phantomjs.path} --config="#{config_json}" "#{rasterize_js}" "#{url}" "#{session_id}"), File::RDWR) do |io|
          io.write(html)
          io.close_write
          io.read
        end
      end
    end

    private

    def config_json
      File.join(__dir__, "config.json")
    end

    def rasterize_js
      File.join(__dir__, "rasterize.js")
    end
  end
end

rasterize-min.js

var fs = require('fs');
var system = require('system');
var webpage = require('webpage');

var content = fs.read('/dev/stdin');

var url = system.args[1];
var sessionId = system.args[2];

phantom.addCookie({
  'name': '_session_id',
  'value': sessionId,
  'domain': 'localhost',
  'path': '/',
  'httponly': true,
  'secure': false
});

var page = webpage.create();
page.setContent(content, url);

function checkReadyState() {
  var readyState = page.evaluate(function() { return document.readyState; });
  if (readyState === 'complete') {
    onPageReady();
  } else {
    setTimeout(checkReadyState);
  }
}

function onPageReady() {
  page.render('/dev/stdout', { format: 'pdf' });
  phantom.exit();
}

checkReadyState();

rasterize.js

var fs = require('fs');
var system = require('system');
var webpage = require('webpage');

var page = webpage.create();

var output = system.stderr;

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  output.writeLine('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};

function logError(source, msg, trace) {
  output.writeLine(source + ' ERROR: ' + msg);
  trace.forEach(function(item) {
    output.writeLine('  ' + item.file + ':' + item.line);
  });
}

page.onError = function(msg, trace) {
  logError('PAGE', msg, trace);
};

phantom.onError = function(msg, trace) {
  logError('PHANTOM', msg, trace);
  phantom.exit(1);
};

page.onResourceRequested = function(request) {
  output.writeLine('REQUEST: ' + JSON.stringify(request, undefined, 4));
};

var content = fs.read('/dev/stdin');
var url = system.args[1];
var sessionId = system.args[2];

phantom.addCookie({
  'name': '_session_id',
  'value': sessionId,
  'domain': 'localhost',
  'path': '/',
  'httponly': true,
  'secure': false
});

page.setContent(content, url);

var paperSize = {
  format: 'A4',
  margin: {
    top: '1cm',
    bottom: '1cm',
    left: '2cm',
    right: '2cm'
  }
};

// Define PDF header and footer using HTML template elements.
// Example: `<template id="pdf-footer" data-height="1cm">Page <strong>%{pageNum}</strong></template>`
['header', 'footer'].forEach(function(section) {
  var template = page.evaluate(function(s) {
    var element = document.querySelector('template#pdf-' + s);
    return element && { height: element.dataset.height, contents: element.innerHTML, style: element.getAttribute('style') };
  }, section);
  if (!template) return;
  paperSize[section] = {};
  paperSize[section].height = template.height;
  paperSize[section].contents = phantom.callback(function(pageNum, numPages) {
    var html = template.contents.replace(/%{pageNum}/g, pageNum).replace(/%{numPages}/g, numPages);
    return addPrintStyle(html, template.style);
  });
});

function addPrintStyle(html, bodyStyle) {
  return '<style media="print">\n' +
    'body {' + bodyStyle + '}\n' +
    printStyle() +
    '</style>\n' +
    html;
}

var cachedPrintStyle;
function printStyle() {
  if (!cachedPrintStyle) {
    cachedPrintStyle = page.evaluate(function() {
      var p = Array.prototype;
      return p.filter.call(document.styleSheets, function(s) {
        return p.some.call(s.media, function(m) { return m === 'print'; });
      }).map(function(s) {
        return p.map.call(s.rules, function(r) { return r.cssText; }).join('\n');
      }).join('\n');
    });
  }
  return cachedPrintStyle;
}

page.paperSize = paperSize;

function checkReadyState() {
  var readyState = page.evaluate(function() { return document.readyState; });
  if (readyState === 'complete') {
    onPageReady();
  } else {
    setTimeout(checkReadyState);
  }
}

function onPageReady() {
  page.render('/dev/stdout', { format: 'pdf' });
  phantom.exit();
}

checkReadyState();

Thank you very much for the detail. I am more looking for a library which doesn't like WKHTMLTOPDF where you need to install it in the server. I am looking for an open source MIT license based tool to convert the html to pdf where the html more like a letterhead with images and all.

There is an another JS library called openthmltopdf but couldn't find any rails conversion of it. I am a newbie and so I could not convert the java code like you to ruby.

Does the above code can work with the image url referenced in the html?

Apologies for my neutral english written and please ignore my grammar mistakes

This code only depends on the PhantomJS gem, and it should be able to include images referenced in the HTML.

PhantomJS is no longer being maintained, and today I would probably base it on https://github.com/puppeteer/puppeteer —but that would require installing Node.js+Chrome on the server.

Thank you very much Tobias.

Thanks tobiashm.