Archive for February, 2010

Generate page as PDF from TYPO3 with the webkitpdf extension

Wednesday, February 24th, 2010

I’ve been digging quite a lot into this thing about generating a TYPO3 page as a PDF file. There are a few extensions in TER that does this in various ways. The two best shots I came up with after some fiddeling was

  • PDF Generator 2 (pdf_generator2)
  • WebkitPDF (webkitpdf)

There are some others but, afaik they lack CSS support.

I started out with the first one, which was really  easy to set up and use, but when I launched it on my production server it throw memory errors, so I started to play with WebkitPDF instead. This extension is a simple but powerfull wrapping around the Wkhtmltopdf project (http://code.google.com/p/wkhtmltopdf/) which basically takes the Webkit HTML engine and generates a print out from that.

The documentation instructs you put the FE plugin on a new page, and then add a short TS into you TS Setup. I thought I’d post my TS setup here for example on how to use it slightly different (mostly since I wanted to have the current page title as filename). Note that I’m forwarding the PDF link to a ts object – lib.pdfLink. I’ve mapped that in an FCE with links in my case. Instead of adding the FE plugin on a separate page I include it on all pages (last row in TS) – since I need the ouput possibility on most pages anyway.

  1. plugin.tx_webkitpdf_pi1.scriptParams {
  2.   print-media-type =
  3.   margin-top = 0mm
  4. }
  5. //set current page title as output filename
  6. plugin.tx_webkitpdf_pi1.staticFileName = TEXT
  7. plugin.tx_webkitpdf_pi1.staticFileName.data = page : title
  8. //generate link
  9. includeLibs.webkit = EXT:webkitpdf/res/user_webkitpdf.php
  10. lib.pdf = USER
  11. lib.pdf.userFunc = user_webkitpdf->user_getPDFLink
  12. lib.pdf {
  13.   //pid =
  14.   linkText = produktblad i pdf-format
  15. }
  16. lib.pdfLink < lib.pdf
  17.  
  18. //include the renderer. we do this on the same page, since we want to fetch the correct page title as filename
  19. page.100 < plugin.tx_webkitpdf_pi1

Additional notes:

I just realized that the CSS attribute page-break-after/before is a bit kinky with the pdf converter (actually it’s the webkit engine, and Firefox has the same problem. I didn’t bother to check if IE suffers from the same, but I guess it does…).
If you want to break a page somewhere, then make sure the page break doesn’t reside in floated elements. This is a bit tricky since a modern HTML template normally consists of floated divs and by that there is no natural position for such page break. This was fairly easy to solve for me in my current case since I really didn’t need the other columns in my output. Therefore I could first set the divs like:

  1. [..general CSS layout setup..]
  2.  
  3. @media screen {
  4. .leftColumn { float: left; }
  5. .rightColumn { float: right; } /*or whatever*/
  6. .pagebreak { visibility: hidden; } /*pagebreak elements should not show up in browser*/
  7. }
  8.  
  9. @media print {
  10. .rightColum { visibility: hidden; }/*dont want it in print mode*/
  11. .pagebreak { visibility: show; page-break-after: always; }
  12. }

I made a small FCE in TYPO3 containing a div with class .pagebreak, which I could insert anywhere on a page. It’s hidden in media screen, but breaks the page when printing. Pritty nifty if you ask me :P

Posted in Development, Typo3, Typoscript snippets | 2 Comments »