[Danny Berger](https://dpb587.me/ "Home")

# Using HTML Headers with wkhtmltopdf

March 15, 2013

Preparing for my job search, I really wanted to somehow reuse the content from my [about](https://dpb587.me/about.html) page for my résumé 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`](https://code.google.com/p/wkhtmltopdf/) before, I knew it could be a solution.

I started by creating a simple [header file](https://github.com/dpb587/dpb587.me/blob/master/static/dev/content/header-simple.html) 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`](https://developer.mozilla.org/en-US/docs/CSS/page-break-inside) – to prevent specific lines from breaking across pages (e.g. keeping the job title and company lines together)
- `a` tag styling – suppressing underlines and visual differences since they make less sense when printed on paper
- `.screen-only` and `.print-only` classes – 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ésumé (and cover letters, references, …) whether it's through [PDF file](http://static.dpb587.me/about.pdf) or [web page](https://dpb587.me/about.html). When viewing as a PDF, it has the added benefits of remaining interactive with embedded links.

## Reader Comments

Copyright © 2026 // [dpb587.me](https://dpb587.me/) is a [personal](https://dpb587.me/projects/website), [open source](https://github.com/dpb587/dpb587.me/blob/main/content/post/2013/using-html-headers-with-wkhtmltopdf-20130315.md) site.