wkhtmltopdf headers post

2013-03-18 13:52:10 -06:00
parent d78f59c1c6
commit ffef41433c
2 changed files with 76 additions and 0 deletions
--- a/blog/_posts/2013-03-15-using-html-headers-with-wkhtmltopdf.md
+++ b/blog/_posts/2013-03-15-using-html-headers-with-wkhtmltopdf.md
@@ -0,0 +1,47 @@
+---
+title: Using HTML Headers with wkhtmltopdf
+layout: post
+tags: headers wkhtmltopdf
+description: Experimenting with dynamic HTML headers for PDFs.
+---
+
+Preparing for my job search, I really wanted to somehow reuse the content from my [about][2] page for my
+r&#233;sum&#233; instead of trying to also maintain the information in a Word/Google Drive file. Mac OS X has the
+convenient capability to convert any print to a PDF which is helpful in creating a general print-specific stylesheet for
+browsers, but it still had a few drawbacks. One of those drawbacks is headers - I expect to see them on even the
+simplest professional documents. Having used [`wkhtmltopdf`][1] before, I knew it could be a solution.
+
+I started by creating a simple [header file][3] to include my name, my website, document name, and page information. I
+also created a new CSS class which would take care of hiding headers and footers since they just take up extra space and
+are being replaced. By using a few extra arguments, `wkhtmltopdf` does a brilliant job at creating a professional
+document:
+
+    wkhtmltopdf \
+      --print-media-type \
+      --run-script 'document.body.className+=" alt-printarticle";' \
+      --margin-left 8mm --margin-right 8mm --margin-top 20mm \
+      --header-spacing 3 \
+      --header-html 'http://localhost:4000/include/content/header-simple.html?doctitle=r%26%23233%3Bsum%26%23233%3B' \
+      --title 'resume' \
+      'http://localhost:4000/about.html' \
+      resume.pdf
+
+Once that was working, I applied a few other tricks to make the printout a bit nicer:
+
+ * [`page-break-inside`][5] &ndash; to prevent specific lines from breaking across pages (e.g. keeping the job title and
+   company lines together)
+ * `a` tag styling &ndash; suppressing underlines and visual differences since they make less sense when printed on
+   paper
+ * `.screen-only` and `.print-only` classes &ndash; to show slightly different content when printing (e.g. showing
+   company website addresses instead of a generically linked "website" that looks simpler on browser screens)
+
+Finally, after a bit of experimenting, learning, and styling, I can now present a consistent r&#233;sum&#233; (and cover
+letters, references, &hellip;) whether it's through [PDF file][4] or [web page][2]. When viewing as a PDF, it has the
+added benefits of remaining interactive with embedded links.
+
+
+ [1]: https://code.google.com/p/wkhtmltopdf/
+ [2]: /about.html
+ [3]: /include/content/header-simple.html
+ [4]: http://static.dpb587.me/about.pdf
+ [5]: https://developer.mozilla.org/en-US/docs/CSS/page-break-inside
--- a/include/content/header-simple.html
+++ b/include/content/header-simple.html
@@ -0,0 +1,29 @@
+<html>
+    <head>
+        <script>
+            function dynvar() {
+                var vars = {};
+                var x = document.location.search.substring(1).split('&');
+        
+                for (var i in x) {
+                    var z = x[i].split('=',2);
+        
+                    if (!vars[z[0]]) {
+                        vars[z[0]] = unescape(z[1]);
+                    }
+                }
+        
+                document.getElementById('doctitle').innerHTML = vars.doctitle;
+                document.getElementById('paginate').innerHTML = 'page ' + vars.page + ' of ' + vars.topage;
+            }
+        </script>
+    </head>
+
+    <body style="margin:0;" onload="dynvar();">
+        <div style="border-bottom:#CCCCCC solid 1px;color:#333;font-family:Lato,sans-serif;font-size:12px;height:36px;position:relative;">
+            <div style="float:left;padding:0 5px 0 4px;"><img alt="DPB" src="http://www.gravatar.com/avatar/5544fe6a05400da5a8957ff29dd6718c.png?s=128" style="border-radius:3px;width:32px;" /></div>
+            <div style="float:right;list-style:none;margin:3px 3px 0;text-align:right;"><strong id="doctitle">{doctitle}</strong><br /><span id="paginate" style="color:#666666;display:inline-block;font-size:11px;font-weight:300;padding-right:1px;">page {page} of {topage}</span></div>
+            <h1 style="font-size:15px;margin:0;"><strong>Danny Berger</strong><br /><a href="http://dpb587.me/" style="color:#666666;font-size:11px;font-weight:300;text-decoration:none;">http://dpb587.me</a></h1>
+        </div>
+    </body>
+</html>