Hello, finally I got a solution using JQuery.
<!-- Scripts -->
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css" />
<script>
(function () {
var
form = $('#dvMain'),
cache_width = form.width(),
cache_height = form.height(),
a4 = [595.28, 841.89];
if ('@Model.Mode' == "PDF") {
$('body').scrollTop(0);
createPDF();
}
function createPDF() {
if (cache_height > 600)
cache_height = 600;
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 10, 10, 420, cache_height);
doc.save('techumber-html-to-pdf.pdf');
form.width(cache_width);
});
}
function getCanvas() {
form.width((a4[0] * 1.33333)).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 3000,
removeContainer: true
});
}
}());
</script>
HTML:
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Reference PDF
</title>
</head>
<body>
<div class="ui segment">
<div id="dvMain" name="dvMain">
<div class="clr"></div>
<div class="col-md-12">
<label>Student Name:</label> <label id="lblSName" name="lblSName"> @Model.Student</label> <br />
<label>Date of Brith:</label> @dob <br /><br />
<label>Course applied for:</label> @Model.ApplicationCourses
</div>
<div class="col-md-12">
<br />
<label>Referee Name:</label> @Model.Referee <br />
<label>Position:</label> @Model.RefereesJobTitle<br />
<label>Organisation:</label> @Model.InstitutionName
</div>
<div class="clr"></div>
@if (string.IsNullOrEmpty(Model.ReferenceCompletedDate))
{
<div class="col-md-12">
<label>Reference Status:</label> Reference not completed
</div>
}
else
{
<div class="col-md-12">
<label>Reference Status:</label> Completed
</div>
<br />
<div class="col-md-12">
@Html.Raw(Model.HTMLContent)
</div>
}
</div>
</div>
</body>
</html>