Play2 Pdf Plugin: JS enabled and disabled browser

Table of contents

Reading Time: 2 minutes

In this post I’m going to talk about generating PDF documents in Play web application with the help of “play2-pdf plugin”.

Firstly, I want to focus on the criteria that we consider or investigate while generating PDF in our projects:

Is it server side or client side pdf generation as client side generation doesn’t work for JavaScript disabled browser.
Whether its on the fly or generated PDF has to be stored somewhere at server side before sending to User.
Support for the library and also active development going on in library or not.
Complexity of PDF generation and integration with app.

I recently acquainted with these criteria and wanted to blog about my experience on Play2-Pdf plugin.

This module allows you to render PDF document dynamically. It simply renders your HTML and CSS based templates to PDF on server side and then pushed it to client site, so it works for both JavaScript enabled and disabled browser. It is based on the Flying Saucer library, which in turn uses iText for PDF generation.

Usage: Integrating this plugin within application

Here, I have used a standard Play-scala template i.e. index.scala.html and wrapped the content inside printPdf.scala.html which can act as a base template for printing pdf where we can link CSS files, but be aware not to use the media="screen"qualifier, you can define your own styling by using media="print" attribute while linking to css.

index.scala.html:

@(message: String)
@printPdf(Welcome to Play 2.5) {
    Image: <img src="/public/images/favicon.png"/><br/>
    Hello world! <br/>
    @message
}

printPdf.scala.html:

@(title: String)(content: Html)

<html lang="en">
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="print" 
            href="@routes.Assets.versioned("stylesheets/main.css")">
    </head>
    <body>
        < div >
            @pdfHeader
        < /div >
        < div class="content-text" >
            @content
        < /div >
        < div >
            @pdfHeader
        < /div >     
    </body>
</html>

main.css: Here, body tag css gets apply to both web and pdf version, but @media screen will apply to only web and @media print for pdf only. In this way you separate your web and pdf version styling.

body {
  font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
  font-size: 12px;
}

@media print {
  .content-text {
    color:#FDF124;
    text-align: center;
  }
}

@media screen {
  .content-text {
    color:#4A50E5;
    text-align: left;
  }
}

Then, add to your library Dependencies in your build.sbt:

libraryDependencies ++= Seq(
    "it.innove" % "play2-pdf" % "1.4.0"
)

Then this template, after having imported it.innove.paly.pdf.PdfGenerator, can simply be rendered as:

def homepage: Action[AnyContent] = Action { implicit request =>
    Ok(PdfGenerator.toBytes(views.html.index("Your PDF is generated"), host)).as("application/pdf")
}