Friday, 26 January 2018

ASP.NET MVC Generate and Print PDF using Rotativa MVC

In this tutorial, I am going to explain you how to print PDF of webpage in ASP.NET MVC using Rotativa MVC. Rotativa MVC is framework to convert your view into pdf file. Rotativa can be install using nuget package manager. I will be using Visual Studio 2013. Below is step by step tutorial.

Creating ASP.NET MVC Empty Application

Now the next step is to create ASP.NET MVC empty application as shown below.
Go to FileNewProject. A new window will be open as shown below.
Now go to Web and select .NET Framework 4.5 and give project name and click on OK .

Creating asp.net mvc 5 application

Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.

Selecting asp.net mvc 5 empty template

Now, a new project will be created as shown below.

Asp.net mvc 5 empty folder structure

Installing Rotativa in Mvc

Next step is to install Rotativa. Right click on References and go to Manage NuGet Packages as shown below.

Manage NuGet Packages in ASP.NET MVC

After that a new window will open as shown below. Search for Rotativa and you can see different framework available. I tried first option Rotativa, but it was not installed properly for some reason then I installed Rotativa.MVC which worked. So install Rotativa.MVC in ASP.Net MVC projects.

Installing Rotativa MVC in ASP.Net Mvc

Adding Models

Go to Models folder and add new class file Employee.cs. Now replace all code with below code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication1.Models
{
    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public int Salary { get; set; }
    }
}

Adding Controller

Next step is to add controller to application. Go to controller folder and add new empty controller named as Home controller. Replace all code with below code. Here first method is Index which returns list of dummy Employee. PrintPage method is used to print your Index view as pdf file. Here we have different print methods like ActionAsPdf, ViewAsPdf, UrlAsPdf, PartialViewAsPdf with different overloads.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;
using Rotativa.MVC;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        List<Employee> list = null;
        public ActionResult Index()
        {
            list = new List<Employee>() {
            new Employee{EmployeeId=1,Name="Yogesh",Gender="Male",Salary=25000},
            new Employee{EmployeeId=2,Name="Mary",Gender="Female",Salary=30000},
            new Employee{EmployeeId=3,Name="Mike",Gender="Male",Salary=35000},
            new Employee{EmployeeId=4,Name="Rahul",Gender="Male",Salary=40000},
            };
            return View(list);
        }
        public ActionResult PrintPage()
        {
            // for viewing pdf
            return new ActionAsPdf("Index", list);

            // for viewing pdf with file name
            //return new ActionAsPdf("Index", list) { FileName = "File_Name.pdf" };

            // return new ViewAsPdf("Index", list) { FileName = "File_Name.pdf" };

            // url in pdf
            //return new UrlAsPdf("http://www.asparticles.com") { FileName = "File_Name.pdf" };

            // partialview in pdf
            //return new PartialViewAsPdf("_PartialViewName", list) { FileName = "File_Name.pdf" };
        }
    }
}

Adding View

Now, right click on home controller index action method, add new view and name Index. Select Empty template and uncheck Use layout page and click on Add as shown below.

Addling index view

Now go to Views / Home folder, open Index.cshtml file and replace all code with below code.
Here Scripts and CSS files are used for styling the View. And one ActionLink helper method to call PrintPage action method.

Index.cshtml Code:
@model List<WebApplication1.Models.Employee>

<h2>Print PDF in ASP.NET MVC Using Rotativa.MVC</h2>

<script src="~/Scripts/jquery-3.0.0.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />

<table class="table table-striped table-inverse">
    <thead class="thead-inverse">
        <tr>
            <th>Employee Id</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Salary</th>
        </tr>
        </thead>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.EmployeeId</td>
                <td>@item.Name</td>
                <td>@item.Gender</td>
                <td>@item.Salary</td>
            </tr>
        }
</table>

@Html.ActionLink("Print PDF", "PrintPage", "Home")

When application runs then view can be seen as below.

Print PDF in ASP.NET MVC Using Rotativa.MVC

Now click on Print PDF link, Index view will be rendered as PDF or will be downloaded as PDF file depends on method you have used.

ASP.NET MVC Generate and Print PDF using Rotativa MVC
Share:

0 comments:

Post a Comment

Email Subscription

Subscribe to our newsletter to get the latest articles directly into your inbox

Blog Archive

BUY FROM AMAZON