How to return View as PDF in .Net core ?
Portable Document Format(PDF) as the name refers is a file format which presents documents in a manner independent of software , hardware and OS.
PDF format is very important for printing the document and information.
We can display the content in our webpage in a pdf format which makes it easier to print rather than displaying it in an usual normal web page.
Suppose We have a condition where we need to print the invoice or bill to the user from our system then there is a simple way for doing it in .net core. It will be easier to print the invoice or bill if it is first converted into PDF format.
So, below we have the steps for returning the view in a PDF format in .net core:
- First create a new .net core web application
- Then go to tools, click on nugget packet manager and install package- Rotativa which is compatible to the version of your project
- Once the package Rotativa is installed, go to startup of the project and add the following code inside Configure in Startup
RotativaConfiguration.Setup(env);
- We need an additional file to convert html to pdf. You can dowload the files from the linnk given below and add the file to wwwroot in your project inside Rotativa folder:
File Location: Github Location
- Now on your Home Controller add a new Action and return the View in a PDF format like below:
public IActionResult Index()
{
return new ViewAsPdf();
}
- Now add the view named Index in our case , which will be displayed as the PDF :
@{ ViewData["Title"] = "Home Page"; }
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="style.css">
<link rel="license" href="https://www.opensource.org/licenses/mit-license/">
<script src="script.js"></script>
<link href="~/css/demo.css" rel="stylesheet" />
</head>
<body>
</div>
<h1>Invoice</h1>
<table class="inventory" border="1">
<thead>
<tr>
<th>
<span contenteditable>Item</span>
</th>
<th>
<span contenteditable>Description</span>
</th>
<th>
<span contenteditable>Rate</span>
</th>
<th>
<span contenteditable>Quantity</span>
</th>
<th>
<span contenteditable>Price</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="cut">-</a>
<span contenteditable>Table</span>
</td>
<td>
<span contenteditable>Experience Review</span>
</td>
<td>
<span data-prefix>र </span>
<span contenteditable>150.00</span>
</td>
<td>
<span contenteditable>4</span>
</td>
<td>
<span data-prefix>र </span>
<span>600.00</span>
</td>
</tr>
<tr>
<td>
<a class="cut">-</a>
<span contenteditable>Chair</span>
</td>
<td>
<span contenteditable>Round</span>
</td>
<td>
<span data-prefix>र </span>
<span contenteditable>100.00</span>
</td>
<td>
<span contenteditable>4</span>
</td>
<td>
<span data-prefix>र </span>
<span>400.00</span>
</td>
</tr>
<tr>
<td>
<a class="cut">-</a>
<span contenteditable>Bed</span>
</td>
<td>
<span contenteditable>Wide Long</span>
</td>
<td>
<span data-prefix>र </span>
<span contenteditable>15000.00</span>
</td>
<td>
<span contenteditable>4</span>
</td>
<td>
<span data-prefix>र </span>
<span>60000.00</span>
</td>
</tr>
<tr>
<td>
<a class="cut">-</a>
<span contenteditable>Daraz</span>
</td>
<td>
<span contenteditable>Woods</span>
</td>
<td>
<span data-prefix>र </span>
<span contenteditable>10000.00</span>
</td>
<td>
<span contenteditable>4</span>
</td>
<td>
<span data-prefix>र </span>
<span>40000.00</span>
</td>
</tr>
</tbody>
</table>
<aside>
<h1>
<span contenteditable>Additional Notes</span>
</h1>
<div contenteditable>
<p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p>
</div>
</aside>
</body>
</html>
- Now run the project and you will get the output and the view in PDF as given below:
So now the page is displayed in PDF format and can be easily printed or downloaded.
Also Read: Code Faster in Visual Studio with Code Snippet
