«
»

Generate page as PDF from TYPO3 with the webkitpdf extension

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

This entry was posted on Wednesday, February 24th, 2010 at 10:08 and is filed under Development, Typo3, Typoscript snippets. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Generate page as PDF from TYPO3 with the webkitpdf extension”

  1. Sanjin Says:
    February 24th, 2010 at 12:55

    Great post :)

  2. Jochen Says:
    February 22nd, 2011 at 15:39

    webkitpdf with customized templates
    ———————————–
    This is an example how to create PDF files using a customized template and the webkitpdf extension. For this to work you need to install the realurl extension too.
    Some disadvantage is the presentation of the PDF file. It is only downloadable. There is no possibility to show it inline in a browser tab or to launch it in Acrobat Reader from the download dialog.

    # set current page title as output filename
    plugin.tx_webkitpdf_pi1.staticFileName = TEXT
    plugin.tx_webkitpdf_pi1.staticFileName.data = page:title

    # Generate a typoLink object to display as link for PDF generation
    # on the web page.
    # This pdfLink version allows the use of an customized template for
    # pdf generation. For this to work the extension realurl has to be
    # installed and an additional PAGE version (e.g. page_pdf=PAGE)
    # with another typeNum (e.g. typeNum=175) should be defined.
    lib.pdfLink = TEXT
    lib.pdfLink {
    value = Print version
    typolink {
    parameter.insertData=1
    parameter = {TSFE:id}
    no_cache = 1
    title = Print version of this page
    additionalParams {
    data = getIndpEnv:TYPO3_REQUEST_URL
    # add the typeNum at the end of the wrap
    wrap = &tx_webkitpdf_pi1[urls][0]=|?type=175
    }
    }
    }

    # Use of a customized template file for PDF output
    page_pdf = PAGE
    page_pdf {
    typeNum = 175

    10.template = FILE
    10.template.file = fileadmin/template/pdf.tmpl
    # …
    }

    # Add the link for PDF generation on web page
    page.10.marks.PDF_PRINT < lib.pdfLink

    # Include the PDF renderer.
    page.899 < plugin.tx_webkitpdf_pi1

Leave a Reply