Export PDF From HTML In MVC.NET

Introduction

There are many tools for exporting PDF files in MVC.NET but you can export a PDF from HTML quickly and flexibly by using Rotativa plug-in. You can create a PDF from a View or Partial View as well and can use any of the languages like bootstrap, CSS, jQuery etc. for the front-end.

Now, let's start with creating a simple application in ASP.NET MVC for exporting the PDF.

Step 1. Create a Project

After opening Visual Studio, next, we are going to create an ASP.NET MVC project. To do that, just click File - New - Project.

After choosing a project, a new dialog will pop up. In that, select ASP.NET Web Application in the Web tab and give your project the location and name. Then, click on the "Ok" button. Choose the MVC Template.

Step 2. Install Rotativa NuGet Package

First of all, we need to install the Rotativa NuGet package. For it, open the Package Manager Console from Tools -> NuGet Package Manager -> Package Manager Console.

After opening the Package Manager Console, install Rotativa using this command.

Install-Package Rotativa -Version 1.7.4-rc.

Step 3. Add .edmx file and attach the database

Right-click on the Models folder and click "Add New Item". In the next popup, select ADO.NET Entity Data Model.

After clicking on the "Add" button, this popup will open. In there, select the database.

After clicking on the OK button, the following popup will open.

On clicking "Next", the .edmx file will get created.

Step 4. Create a method for returning a PDF file

Let's create a method that will return the PDF file.

In this method, the "empEntities"  is the entity name, and "context" is an object of the entity. You can fetch the record from the database using this object.

The "emp_table" is my table name.

The "_JobPrint" is a partial view name that we will create in the next step.

public ActionResult PrintPDF()
{
    empEntities context = new empEntities();
    List<emp_table> Data = context.emp_table.ToList();
    return new PartialViewAsPdf("_JobPrint", Data)
    {
        FileName = "TestPartialViewAsPdf.pdf"
    };
}

Step 5. Create Partial View

Create a Partial View or View in the format in which you want to export the PDF.

Right-click on the PrintPDF method and select the "Add View" option. The below pop-up will open.

After clicking the "Add" button, a Partial View will be created.

In the below code, I created a table of employee details.

@model List<RotativaPDF.Models.emp_table>
<style>
    thead {
        background-color: black;
        color: white;
    }
    table {
        border: 1px solid black;
    }
    td, th {
        padding: 5px;
        font-size: 14px;
    }
</style>
<table class="table table-bordered table-striped" border="1" style="border-color: black">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Contact</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.name</td>
                <td>@item.age</td>
                <td>@item.contact</td>
            </tr>
        }
    </tbody>
</table>

Step 6. Call the method for exporting the PDF

Give a link to any button or where you want to export the PDF, like in the below code.

<a href="/PDF/PrintPDF" class="btn btn-success">PDF</a>

On clicking this link, you will get the PDF.

If you want to set the footer, then you need to use CustomSwitches. You can also set the page orientation, page size, and file name.

return new PartialViewAsPdf("_JobPrint", Data)
{
    PageOrientation = Orientation.Landscape,
    PageSize = Size.A3,
    CustomSwitches = "--footer-center \" [page] Page of [toPage] Pages\" --footer-line --footer-font-size \"9\" --footer-spacing 5 --footer-font-name \"calibri light\"",
    FileName = "TestPartialViewAsPdf.pdf"
};

Output