Here we will see how to export to PDF using jspdf in ASP.NET MVC. PDF is the most widely used document format to share document over the web.

How to Export to PDF using jspdf in ASP.NET MVC:

jspdf is a widely used open source jquery library to export HTML to pdf. We can use jspdf to export HTML document to PDF. Here are some of the methods that jspdf provides.

Methods of jspdf:

1- doc.save(mypdf.pdf’):

Will save the document with the name mypdf.

2- doc.addPage():

Gets an extra page in the PDF file.

3- doc.setFontType(“stylename”):

Changes the style of the font such as to italic or bold.

4- doc.setFont(‘fontfaceName’):

This is used to set font for the document.

Required JS:

https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js

Example of using jspdf in ASP.NET MVC:

Create an ASP.NET MVC application called JSPDFDemo.

Create a Controller:

Create a Controller called HomeController. Replace the following code in the HomeController.

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

namespace JSPDFDemo.Controllers
{
 public class HomeController : Controller
 {
 //
 // GET: /Home/

public ActionResult Index()
 {
 return View();
 }

}
}

Create View:

Right click on the Index action method and create a View called Index. Replace the following code in View.

@{
 ViewBag.Title = "Contact";
 Layout = null;
}
<style type="text/css">
 td {
 padding: 10px;
 }

th {
 padding: 10px;
 background-color: aqua;
 }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<div id="divEmployee">
 <h2>
 Export to PDF using jspdf in ASP.NET MVC
 </h2>
 <table id="tblEmployee">

<thead>
 <tr class='warning'>
 <th>ID</th>
 <th>Name</th>
 <th>Join Date</th>
 <th>Age</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1</td>
 <td>Aman Roy</td>
 <td>March 25, 2014</td>
 <td>25</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Vishal Singh</td>
 <td>January 25, 2014</td>
 <td>26</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Gaurav Singh</td>
 <td>March 25, 2014</td>
 <td>25</td>
 </tr>
 <tr>
 <td>4</td>
 <td>Vinod Palne</td>
 <td>May 25, 2014</td>
 <td>22</td>
 </tr>
 </tbody>
 </table>

</div>
<button onclick="javascript:Export();">Export To PDF</button>
<script type="text/javascript">
 function Export() {
 var pdf = new jsPDF('p', 'pt', 'letter');

pdf.text(50, 25, "Employee Report");
 // source can be HTML-formatted string, or a reference
 // to an actual DOM element from which the text will be scraped.
 source = document.getElementById('divEmployee').innerHTML;

// we support special element handlers. Register them with jQuery-style
 // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
 // There is no support for any other type of selectors
 // (class, of compound) at this time.
 specialElementHandlers = {
 // element with id of "bypass" - jQuery style selector
 '#bypassme': function (element, renderer) {
 // true = "handled elsewhere, bypass text extraction"
 return true
 }
 };
 margins = {
 top: 80,
 bottom: 60,
 left: 40,
 width: 522
 };
 // all coords and widths are in jsPDF instance's declared units
 // 'inches' in this case
 pdf.fromHTML(
 source, // HTML string or DOM elem ref.
 margins.left, // x coord
 margins.top, { // y coord
 'width': margins.width, // max width of content on PDF
 'elementHandlers': specialElementHandlers
 },

function (dispose) {
 // dispose: object with X, Y of the last line add to the PDF
 // this allow the insertion of new lines after html
 pdf.save('Test.pdf');
 }, margins);
 }
</script>

Output:

jspdf

View More:

Conclusion:

I hope this is a useful tutorial for you. Please don’t hesitate to comment for any technical help. Your feedback and suggestions are always welcome to me.

Thank You.

Leave a Comment