Using Rotativa in MVC Application

Introduction

Generating a PDF from your web applications is easy, simple and reliable. There are many tools/packages available in Nuget. Here, this article explains how to use Rotativa in an MVC application. Rotativa makes it very easy to generate a PDF from HTML. It is a derived version of wkHTMLtoPDF that converts HTML to PDF. According to the Wikipedia, WebKit is a layout engine software component for rendering webpages in web browsers. Making custom changes to the PDF document generated is quite simple. Using this we can directly download the PDF document for the user or else we can also prompt the document inside an iframe. Let's see how to implement this excellent tool.

Implementation

We need to install the package before starting the implementation. To install the package from the package manager console, the command goes like the following:

Install-Package Rotativa

Then, we can find the Rotativa reference under the reference, with a separate folder named "Rotativa" with the following contents. Another folder named App_Browsers that has the contents required by the package Rotativa.

Now we are ready to implement the Rotativa using the code we are explaining below to generate PDF for directly downloading it as well as showing it in another window. Thus, let's have a look. To implement the PDF using Rotativa, we just need to specify the code below in a separate action method.

public ActionResult Test()
{
    var students = new List
    {
        new xx() {action = "ABC", email = "[email protected]", firstName = "test", lastName = "test"},
        new xx() {action = "ABC", email = "[email protected]", firstName = "test", lastName = "test"},
        new xx() {action = "ABC", email = "[email protected]", firstName = "test", lastName = "test"},
        new xx() {action = "ABC", email = "[email protected]", firstName = "test", lastName = "test"}
    };

    return new Rotativa.ViewAsPDF("TestView", students);
}

The preceding code is a simple action method, where we have created a new model and then as we can see, the return statement here, new Rotativa.ViewAsPDF("TestView",students). This states that a new Rotativa type is created that is used to view the PDF. To this method as you can see, we have ed the first parameter as the View Name and the second parameter as the View Model set for the view. Only the view name can also be used/ed to the overloaded parameter of that method. 

• ViewAsPDF: This method just displays the view as a PDF in the same window and to display the same PDF in another window, we can manipulate it in the JavaScript as in the following:
  

  window.open(url)

• ViewAsPDF-To Download: This is not a property method of the Rotativa class, but can be used differently to download the PDF file directly. Let's see the following code: 
  

  public ActionResult Test()
  {
  
      var PDFResult = new ViewAsPDF("TestView")
      {
          FileName = "ExamReport.PDF",
          CustomSwitches =
              "--footer-center \"Name: " + "XYZ" + "  DOS: " +
              DateTime.Now.Date.ToString("MM/dd/yyyy") + "  Page: [page]/[toPage]\"" +
              " --footer-line --footer-font-size \"9\" --footer-spacing 6 --footer-font-name \"calibri light\""
      };
  
     return PDFResult;
  
  }

  Just use it to declare a new type as ViewAsPDF and return to the action. This will directly download the file for you.
  
• ActionAsPDF: This would return the specified action that returns a view with a viewmodel as a PDF. The code would go as in the following: 
  

  public ActionResult Test(int testID)
  {
       var students = new List
       {
           new xx() {action = "ABC", email = "[email protected]", firstName = "test", lastName = "test"},
           new xx() {action = "ABC", email = "[email protected]", firstName = "test", lastName = "test"},
           new xx() {action = "ABC", email = "[email protected]", firstName = "test", lastName = "test"},
           new xx() {action = "ABC", email = "[email protected]", firstName = "test", lastName = "test"}
       };
      // code to retrieve data from a database
      return View(students);
  }

These are the common methods being used. Now, there is another thing to consider here, the customization that can be done to the PDF files. The use of Custom Switches.

var PDFResult = new ViewAsPDF("TestView")
{
    FileName = "ExamReport.PDF",
    CustomSwitches =
        "--footer-center \"Name: " + "XYZ" + "  DOS: " +
        DateTime.Now.Date.ToString("MM/dd/yyyy") + "  Page: [page]/[toPage]\"" +
        " --footer-line --footer-font-size \"9\" --footer-spacing 6 --footer-font-name \"calibri light\""
};

The FileName property sets the file name for the PDF being downloaded. The Custom Switches is the best property. We can mark the structure. That is a bit messy, but is not cumbersome. Based on the wkHTMLtoPDF there are a list of options that can be used to customize the PDF file. Here in the description of the preceding written code snippet, we have a footer customized. 

• footer-center: This aligns the footer at the center foot of the page.
  
  
• Page:[page]/[toPage]: The [page] to [toPage] marks the current page and the total number of pages in the file.
  
  
• footer-line: Displays line above the footer.
  
  
• footer-font-size: Sets the font size of the footer elements.
  
  
• footer-spacing: Sets the spacing between the footer-line and the text.
  
  
• footer-font-name: Sets the font family/style of text.
  

For more options and details please visit: wkHTMLtoPDF

Conclusion & References

Thus, we saw how easy it is to implement the Rotativa in MVC applications and generate a PDF in minutes. Implement and enjoy.

References

wkHTMLtoPDF

Nuget Rotativa

Github Rotativa