DocRaptor

DocRaptor Blog

Tips and tricks for our HTML to Excel and PDF API

  1. Archive
  2. Categories
  3. RSS

Our New Help Request Feature

Let’s talk about our new help request feature!

Here’s what a typical support request chain looks like: a user has a problem, and emails support. We receive the email, then request extra information, usually a doc log ID and the input HTML. The user provides this information, and then we can start solving the problem. This means a lot of back and forth emails between a user and a friendly dinosaur.

We wanted to simplify this support process, and make it easier for you to send us the information we need to help troubleshoot a problem document.

Setting “help” to “true” when you make your POST request automatically opens a ticket and sends us your document log, input HTML and generated document. You’ll get a confirmation email, and we’ll be able to start working on your ticket a lot more quickly.

Here’s our documentation for making a help request.

Don’t worry - you can still contact us the old fashioned way if you prefer. We love talking to you guys!

TL;DR: Outages, even short ones, are bad.

Lately we’ve been hit by a few incidents of network problems at Linode’s Newark data center, causing interruptions for some of our users and frustration all around. We’re adding more data centers so this problem won’t happen in the future.

We’ve been happy customers of Linode for 4 years. They have been an amazing partner, helping us grow and improve without spending all of our time building out physical hardware.

DocRaptor works by having 12 servers coordinate their efforts to print every document that gets requested. Here’s a rough view of what the infrastructure looks like, assuming everything’s working as expected:

DocRaptor infrastructure - no problems!

These network problems have caused our web servers to lose access to our database servers or workers. Basically when the servers can’t connect to each other, DocRaptor has a hard time with document generation. Like a really hard time.

DocRaptor infrastructure - problems :c

So we’ve decided to move DocRaptor to Amazon’s Elastic Cloud, allowing us to easily spread the application across 3 data centers. Beyond that, Amazon’s services offer many things that should immediately make DocRaptor more stable and reliable. Hopefully even a little faster! Sounds pretty good, right?

Our team has performed this kind of infrastructure change plenty of times before, most recently on our other products Gauges and Instrumental.

Why didn’t we do this sooner? Linode has been rock-solid for us for many years. Their service has allowed us focus on things that mattered more to you: features, performance, and customer support. In fact, the only reason we’re leaving them now is because reliability is the most important feature of DocRaptor.

This data center migration project starts today, and we’ll keep you updated on the progress. You can follow us on Twitter for quick updates, or subscribe to our blog for more in-depth information.

Retinafy Your Olark Attention Grabber Image

DocRaptor added Olark as a means of support a couple months back and it has been really great for talking to our new customers and existing customers. With the onset of mass availability of retina devices, we also went through our entire site and upgraded all our assets to look good on the devices of today. If you’re interested how to do that, check out Thomas Fuch’s Retinafy book. Unfortunately one thing that didn’t look that great was the Olark attention grabber (the little DocRaptor icon you see in the lower right of your screen, unless you closed it).

So if you’re in the same boat as us and want your customer support to look as good as the rest of your site, here are the steps you might take. Let’s start with an image. Let’s say I have a 100px x 127px version of that uploaded to Olark and my attention grabber settings are set correctly. By default I will get something that looks like this:

small alien image

You can immediately the aliasing difference between the alien image vs. the text and chatbox element. We want to fix that. The relevant details of this are explained a little more on this page about attention grabber customization. We have to combine that with a little custom CSS to override the default background styles. Note this will also allow you to set different images for when you are available for chat and not.

// some olark stuff ^^
var retina_image_path = "/app/assets/green_alien@2x.png"
olark.configure('CalloutBubble.bubble_image_url', retina_image_path);
olark.configure('CalloutBubble.offline_bubble_image_url', retina_image_path);
olark.configure('CalloutBubble.bubble_width', 100);
olark.configure('CalloutBubble.bubble_height', 127);
// maybe some other olark stuff
olark.identify('0000-000-00-0000');
#olark-callout-bubble, #olark-callout-bubble-offline {
  background-size: 100px 127px !important;
}

In the end, we get something that looks much nicer: small alien image

Caveats: This will not work on older browsers (IE8 and below, for example) due to no support for background-size.

Making Printable PDFs Just Got Easier

We’ve recently made some changes to DocRaptor that make it much easier to generate easily printed PDFs: fully customizable crop marks and transparency support for TIFF images!

You can now completely customize the length and offset of your crop marks, allowing you to create a trim area on each PDF that will match printer specifications exactly. Custom dimensions for crop marks are set using two new CSS selectors: prince-mark-length and prince-mark-offset.

TIFF files with transparency are supported now, in both CMYKA and RGBA color.

Let’s take a closer look at how you can use these features when generating PDFs!

A PDF with customized crop marks

The default length of crop marks is set to 24pt, and customizing this value with CSS is easy. The syntax looks like:

prince-mark-length: length

Here’s a sample rule, setting the length of crop marks to 30pt:

@page { prince-mark-length: 30pt; }

Not surprisingly, customizing the distance between your crop marks and your trim box is easy, too:

prince-mark-offset: auto | [ length ] {1..4}

A sample integration might look like this, setting the offset between crop marks and the page to 6pts:

@page { prince-mark-offset: 6pt; }

You don’t have to do anything fancy with CSS to add transparency support for TIFF files. Transparency is set when you create the TIFF file, and DocRaptor will respect your wishes when you send the HTML document our way.

We created a sample PDF with customized crop marks to show you how this looks. This PDF also shows off transparency support for a TIFF file, and you can grab the source HTML for this generated PDF.

We’re always working to improve DocRaptor, so keep your eyes peeled for more feature updates!

A Better Dashboard, Part I - Your Document Usage

Tracking how many documents you’re making just got a lot easier! We’ve been overhauling the design of our user dashboard, and we’re excited to talk about how these changes can help you. Let’s get started by taking a look at your usage page!

More useful document generation stats

If you guys like meters and charts, I’ve got great news for you. In the upper right you’ll see a bar showing how manydocuments you’ve made this month. Below that, we’ve got more meters tracking how many production and test documents you’ve created, and how close you are to your monthly capacity. Don’t worry - you’ve still got unlimited test documents.

Track your monthly documents

We wanted to make it easier for you to track how many documents you create in a month, as well as exposing how many test and production documents you make in a month. This graph lives below your monthly tracking meters, showing what your daily document creation looks like.

We hope you guys love the changes we’ve made to your dashboard as much as we do! What could we add to make your dashboard more useful? Let us know!

This is the first in a series of blog posts that will dig into our user interface changes and how you can use them to geneerate better looking documents with less trouble than ever before. Same great PDF and Excel generation service, fresh new coat of paint.

Stay tuned for the next post in this series, when we talk about the improvements we’ve made to your document logs page!

Convert HTML5 to PDF with DocRaptor!

DocRaptor is now running Prince 9.0 in production, which adds full HTML5 support, better CSS3 support and faster Javascript. Many of our users have asked about support for HTML5 (the canvas element in particular) and we’re excited about this update.

All new accounts will default to using Prince 9.0. If you’re an existing user and you’d like to add HTML5 elements to your PDFs, you’ll need to log in and update your default Prince version setting. You can find this option under “Edit Profile” in your Account Dashboard.

Selecting Prince 9 as your default

Be aware that updating your Prince version may break your existing styles, and you may need to do a bit of tweaking to get HTML5 elements working with templates created prior to this update. Don’t worry! You can test Prince 9.0 by setting this optional parameter when creating a PDF: Prince Version

While support for HTML5 and the canvas element are the most exciting parts of this deploy, Prince 9.0 is a big update and brings a lot of new features and bug fixes to our service. You can read through the entire change set here:

Prince 9.0 change set

Want to see what kind of output you can expect with DocRaptor? Take a look at some sample documents on Prince’s website:

Sample generated PDFs

As always, let us know if you run into any problems, or need a hand!

Running Javascripts Before Generating PDFs

So maybe you want to use Javascript to spice up your PDFs prior to generating them. Many of our users need to generate PDF documents with more complicated output than HTML and CSS support. DocRaptor’s Javascript support to the rescue! Running arbitrary Javascript in your document prior to creating it is incredibly simple.

Take a look at this file, for example. You’ll notice it’s mostly Javascript (over 1600 lines of Javascript, in fact) and it produces a QR code you can scan to be taken to DocRaptor’s site.

The bulk of the Javascript allows for the creation of the code, and this line near the bottom of the script determines where the code sends a user:

  qr.addData("http://docraptor.com");

You can change this to be any site you wish, and the QR code will automatically update.

Getting DocRaptor to run any Javascripts prior to generating your PDF is easy. Simply pass this optional parameter prior to creation:

Running Javascript in DocRaptor

By setting another parameter, you can use Prince’s built-in Javascript engine. Prince provides documentation for several useful Javascripts, such as getting a total count of pages in a PDF, or generating tables of contents. You can see an entire list of these Javascripts here:

List of Prince Javascripts

To use Prince’s built-in Javascript engine, you’ll need to pass this parameter when creating a PDF using DocRaptor:

Prince Javascripts in DocRaptor

RAZUR Case Study

We’ve recently been working with a client who needed to implement dynamic PDF generation across multiple marketing pages. This was an interesting use for DocRaptor, and we thought it was a great opportunity for a case study. Chris Merkle, CEO of RAZUR, was kind enough to share his story with us.


Client: RAZUR

www.razuragency.com

Background

RAZUR was in the market for an HTML to PDF solution for their Client, an industry-leading managed security service provider. After reviewing multiple options, including developing their own PHP-based web solution, RAZUR choose DocRaptor.

“Our development team choose DocRaptor because it was cost-effective and allowed us to rapidly roll-out a solution for our Client,” says Chris Merkle, CEO of RAZUR.

The goal was to dynamically generate marketing collateral from content that was already stored in a content management system, without having to change static PDFs every few weeks.

Solution

By using DocRaptor’s URL-based solution and a highly-customized CSS3 stylesheet RAZUR was able to create a flexible template that would scale across 25+ marketing web pages. Hidden HTML “div” tags were used as wrappers to dynamically include “About Us” content, custom call-outs and page titles while adhering to the Client’s strict brand guideline.

Results

RAZUR’s Client is now able to provide their sales team and website visitors with elegant, always up-to-date PDF brochures with the click of a button. By using DocRaptor to generate PDF files, RAZUR was able to create a solution that saved hundreds of hours of content design; the Client no longer had to make changes to the slew of marketing collateral every time the web content changed.


We’re always happy to help developers implement DocRaptor. Our goal is to make it simple to convert HTML to PDF and Excel, and it’s great to hear from satisfied clients like RAZUR.

Do you have an interesting DocRaptor implementation story? Contact us if you’d like to share!

What if Debugging was Easier?

We just made it a lot easier to prototype with DocRaptor! We’ve implemented a new feature that will email errors to you when a PDF or XLS file fails to generate as expected. This feature makes it simpler for new users to implement high quality PDF and Excel generation, as well as helping our established users deal with unexpected problems.

Here’s an example of what these emails look like:

Sample Error Email

We include the error DocRaptor returned as well as a link to the document log for the failed document. By clicking through, you’ll see all the information we have for that document, including any problems or errors in DocRaptor’s attempt to create it.

All new users will automatically be opted in to receive error emails, but existing users will have to opt in. Or maybe you already receive a ton of email, and this feature isn’t super helpful to you. It’s easy enough to turn off. You can make your selection by clicking the “Edit Profile” link in your account dashboard. Behold:

My Profile Page With Error Email Opt In

That’s all there is to it! This feature will notify you when something breaks in production, reduce the time spent on debugging, and make it easier for our support team to assist you if you get stuck.

Generating Landscape Format PDFs

DocRaptor makes it easy to generate PDF files with customized sizes and orientations. Our service uses Prince XML for PDF generation, and setting customized sizes is simply a matter of using optional CSS rules.

Here’s some sample code that will generate a US Letter sized PDF in landscape format:

<html>
  <head>
    <style type="text/css">
      @page { margin: 1em; }
      @page { size: US-Letter landscape; }
      body { font-size: 200%; }
    </style>
  </head>
  <body>
    Behold: a landscape oriented PDF!
  </body>
</html>

Landscape format PDF

You can use optional Prince CSS parameters to create PDF files with a wide variety of standardized sizes and formats, as well as setting your own custom dimensions.

Here’s a link to Prince’s documentation, with a full list of their optional page size CSS parameters:

Optional PDF page sizes

HTTP Timeout Option

Most DocRaptor customers have complete control over the assets they use in their assets, but one of our newer customers is aggregrating content from a variety of marketing material. All of the assets from that material may or may not be available. Bloomingdale’s is not going to keep their May, 2012 email marketing content online forever.

Enter http_timeout, the latest feature available for DocRaptor. By default, we try to fetch an external resource for up to 60 seconds. With this option, you can set the timeout to whatever you want. As an example, here’s a contrived document that takes a long time due to timeout

curl -H "Content-Type:application/json" -d'{"user_credentials":"YOUR_API_KEY_HERE", "doc":{"name":"docraptor_sample.pdf", "document_type":"pdf", "test":"true", "document_content":"<html><body><img src='http://docraptor-callbacks.herokuapp.com/slow'></body></html>"}}' http://docraptor.com/docs > docraptor_sample.pdf

If you run that command, it will sit there for quite a while waiting for a timeout. Let’s try setting the timeout to 5 seconds:

curl -H "Content-Type:application/json" -d'{"user_credentials":"YOUR_API_KEY_HERE", "doc":{"name":"docraptor_sample.pdf", "prince_options":{"http_timeout":"5", "version":"8.1"}, "document_type":"pdf", "test":"true", "document_content":"<html><body><img src='http://docraptor-callbacks.herokuapp.com/slow'></body></html>"}}' http://docraptor.com/docs > docraptor_sample.pdf

Much better.

The important part is

"prince_options":{"http_timeout":"5", "version":"8.1"}

This option only works if you’re Prince 8 (or newer). If you’re using an older version, the option is ignored. It’s not necessary to specify the Prince version if you’re already using 8.1 as your default. If you’re not sure, check your profile page. It’s easy to switch!

Prince 8 - 8 Times More Princely!

Good news, everyone! DocRaptor has been upgraded to Prince 8.1.

The latest version of Prince XML provides better CSS support, which means DocRaptor produces even better PDFs. Prince 8.1 is faster than our current installation of Prince 7.1, and supports CSS3 transforms and has experimental support for HTML5.

For a full list of the changes, check out the change log on Prince XML’s home page:

Prince 8.1 change set

A bit worried about Prince 8.1 breaking your Prince 7.1 layouts? Never fear! We are running both Prince 7.1 and Prince 8.1 side by side, which means you can still use Prince 7.1 to generate documents, if you prefer.

All new DocRaptor accounts will default to Prince 8.1, while all existing accounts will default to Prince 7.1. You can change this setting for all documents you create, or set it per document. Here’s a screenshot showing how to set this parameter globally:

My Profile Page With Default Prince Options

You can use our new Prince version API parameter to select which version of Prince you want to use for each document.

In the near future, we’ll provide improved support for Javascript DOM properties, but this feature has not been implemented with this update.

Don't get caught in the Jurassic Period. Upgrade to DocRaptor Gem 0.2.0

Good news, friend! DocRaptor Gem v0.2.0 Released today. Check out the new Gem with test suite and ARec-style ! methods. Here’s the repo. You can see code changes here.

Gem change log for 0.2.0:

  • tests!
  • added a create! method which will raise an exception when doc creation fails
  • added a list_docs! method which will raise an exception when doc listing fails
  • added a status! method which will raise an exception when getting an async status fails
  • added a download! method which will raise an exception when getting an async status fails

Have your own incredible idea? Send an email with feedback to the DocRaptor dinosaurs or fork it and send us a pull request.

DocRaptor Does Google Webfonts Part 3: Rails Edition

Mark from Carriemail asked about using Google Webfonts</a> in the DocRaptor Rails Example (clone it from github).

Now that the link-fest is over, let’s talk about how to do that (it’s really easy).

In app/views/index.pdf.haml (original), I add the following to the <head> of the haml file used to make the PDFs:

%link{:href => "http://fonts.googleapis.com/css?family=Cantarell|Gravitas+One&v2", :rel => "stylesheet", :type => "text/css"}
%style{:type => "text/css"}
  = "h1 { font-family: 'Gravitas One', cursive; font-weight: bold; }"
  = "th { font-family: 'Cantarell', serif; font-size: 16px; }"

I also altered the table to use th and thead tags. The changes are on the google-web-fonts branch at github.

I added a couple of items to the sample app, and here’s what it looks like after the change (non-test document and font-size bumped).

Listing Examples

Note: If you’re planning to use this in production, I highly suggest using Rails Layouts and external stylesheets to manage your common code and style settings.

Thanks for the question, Mark!

Links:

DocRaptor Does Google Web Fonts Part 2 - Electric Boogaloo

In my original Google Web Fonts post, I gave a simple example of using Google Web Fonts via their CSS downloads. This post deals with using Google Web Fonts via javascript. Yay!

I’m going to pull the js example from the Webfont Loader page. It is reproduced below. Note: I have altered the sample to remove some CSS rules to make it easier to follow.

<html>
  <head>
    <script type="text/javascript">
      WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ] } };
      (function() { 
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
    <style type="text/css">
      .wf-active p { font-family: 'Tangerine', serif }
      .wf-active h1 { font-family: 'Cantarell', serif; font-size: 16px; }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>
</html>

If you’re using the DocRaptor gem example from the DocRaptor Examples repo, you could change the PDF block to look like this (assuming you had saved the above html to a file named google-fonts-js.html in the directory with doc_raptor_gem_example.rb):

File.open("google-fonts-js.pdf", "w+") do |f|
  f.write DocRaptor.create(:document_content => File.read("google-fonts-js.html"),
                           :name => "google-fonts-js.pdf",
                           :document_type => "pdf",
                           :test => true,
                           :javascript => true)
end

After running the file through ruby, you should end up with a PDF named google-fonts-js.pdf that looks like this (caveat: I bumped up the font size, centered the text, and turned off test mode for this picture):

Generated PDF Image

More beautiful fonts in your PDFs with ease!

Downloads:

No Margin PDFs with DocRaptor

We had a support ticket come in this morning about how to make a PDF with DocRaptor having no margins. What follows is a little background information and the simplest way to achieve the result.

Page Styles in Prince XML and DocRaptor

To understand how to do this, you need to know DocRaptor uses Prince XML to produce PDFs. Prince has several interesting additions to standard DOM/CSS, the most important of which for this tutorial is page styles.

Prince allows us to set styles on a @page element. That element corresponds to an element that wraps everything else that will appear in your PDF. An analog of this you are probably familiar with is the page styles you can set when physically printing documents. I encourage you to poke around the @page-related documentation on Prince’s site. Really cool stuff!

Setting Your Page to Have No Margins

Anyway, back to the tutorial. What we want to do is set our page to have no margins, as Prince’s default works out to around an inch/2.5cm. Here’s some HTML and a picture of the document that it generates.

<html>
  <head>
    <style type="text/css">
      @page { margin: 0; }
      body { font-size: 200%; }
    </style>
  </head>
  <body>
    This content is right up against the edge of the page!
  </body>
</html>

What it looks like:

no margin example

It’s as easy as that. Check out the downloads below to see the actual documents.

Downloads:

DocRaptor Does Google Web Fonts

Google Web Fonts are an easy way to add some panache to a website. With DocRaptor’s javascript and font-face support, they’re an easy way to add some style to a PDF.

Google’s Getting Started page has a a very simple example (reproduced below) that can be used to generate a simple PDF.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body { font-family: 'Tangerine', serif; font-size: 48px; }
    </style>
  </head>
  <body>
   <h1>Making the Web Beautiful!</h1>
  </body>
</html>

If you’re using the Ruby Example from the DocRaptor Examples repo, you could change the PDF block to look like this (assuming you had saved the above html to a file named font-sample.html in the directory with straight_ruby_example.rb):

File.open("google-fonts-ftw.pdf", "w+") do |f|
  f.write DocRaptor.create(:document_content => File.read("font-sample.html"),
                           :name             => "google-fonts-ftw.pdf",
                           :document_type    => "pdf",
                           :test             => true)
end

After running the file through ruby, you should end up with a PDF named google-fonts-ftw.pdf that looks like this (caveat: I bumped up the font size, centered the text, and turned off test mode for this picture): PDF generated image

And that’s it. Beautiful fonts in your PDFs with ease!

Headers and Footers in PDFs with DocRaptor

DocRaptor Support gets asked a lot if there’s support for headers and footers. The answer is a most definite YES!

We use Prince XML to product PDFs. As such, there are some specialty CSS rules that can be used to create consistent headers and footers for your PDFs. Here’s the Prince XML page header and footer documentation.

A simple example and output are below.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      @page {
        font-size: 200%;
        @top {
          content: "header";
          background-color: #eee;
        }
        @bottom {
          content: "footer";
          background-color: #eee;
        }
      }
    </style>
  </head>
  <body>
  </body>
</html>

After running it against DocRaptor, you should get a doc that looks like this: header and footer sample image

Downloads