DocRaptor Blog
Tips and tricks for our Excel and HTML to PDF API
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.
- 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).
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):
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:
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): 
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: 
