Export PDF From HTML In MVC.NET

Here, I’m going to explain how to export a PDF from View in MVC.NET. Also, we will see how to set the header and footer with page number.

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. For doing 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 a 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 which 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 which we will create in the next step.
  1. public ActionResult PrintPDF()    
  2. {    
  3.    empEntities context = new empEntities();  
  4.    List<emp_table> Data = context.emp_table.ToList();    
  5.     
  6.    return new PartialViewAsPdf("_JobPrint", Data)    
  7.    {    
  8.       FileName = "TestPartialViewAsPdf.pdf"    
  9.    };    
  10. }     
 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.
  1. @model List<RotativaPDF.Models.emp_table>  
  2.   
  3. <style>  
  4.     thead {  
  5.         background-color:black;  
  6.         color:white  
  7.     }  
  8.     table {  
  9.         border:1px solid black;  
  10.     }  
  11.     td, th {  
  12.         padding:5px;  
  13.            font-size:14px;  
  14.     }  
  15. </style>  
  16.   
  17. <table class="table table-bordered table-striped" border="1" style="border-color:black">  
  18.     <thead>  
  19.         <tr>  
  20.             <th>Name</th>  
  21.             <th>Age</th>  
  22.             <th>Contact</th>  
  23.         </tr>  
  24.     </thead>  
  25.     <tbody>  
  26.         @foreach (var item in Model)  
  27.         {  
  28.             <tr>  
  29.                 <td>@item.name</td>  
  30.                 <td>@item.age</td>  
  31.                 <td>@item.contact</td>  
  32.             </tr>  
  33.         }  
  34.     </tbody>  
  35. </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.
  1. <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.
  1. return new PartialViewAsPdf("_JobPrint", Data)  
  2.            {  
  3.                PageOrientation = Orientation.Landscape,  
  4.                PageSize = Size.A3,  
  5.                CustomSwitches = "--footer-center \" [page] Page of [toPage] Pages\" --footer-line --footer-font-size \"9\" --footer-spacing 5 --footer-font-name \"calibri light\"",  
  6.                FileName = "TestPartialViewAsPdf.pdf"
  7.            };  
 
Output