In my code i try to download the pdf of view but got some error like this "Invalid nested tag div found, expected closing tag img."
Controller code :
[HttpPost]
[ValidateInput(false)]
public FileResult Export(string PdfHtml)
{
using (MemoryStream stream = new MemoryStream())
{
using (StringReader sr = new StringReader(PdfHtml))
{
Document pdfDoc = new Document(PageSize.A4, 10f, 10f, 100f, 0f);
PdfWriter writer = PdfWriter.GetInstance(pdfDoc, stream);
pdfDoc.Open();
XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, sr);
pdfDoc.Close();
}
stream.Close();
return File(stream.ToArray(), "application/pdf", "Resume.pdf");
}
}
View Code:
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gaya Templates</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Resume Template">
<meta name="author" content="Xiaoying Riley at 3rd Wave Media">
<link rel="shortcut icon" href="favicon.ico">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
<!-- FontAwesome JS-->
<script defer src="~/Content/JobSeeker/CSS/fontawesome/js/all.min.js"></script>
<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="~/Content/JobSeeker/CSS/pillar-1.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSubmit").click(function () {
$("#PdfHtml").val($("#resumeContent").html());
});
});
</script>
</head>
<body>
@using (Html.BeginForm("Export", "JobSeeker", FormMethod.Post))
{
<input type="hidden" name="PdfHtml" id="PdfHtml" />
<input type="submit" id="btnSubmit" value="Export" />
<article id="resumeContent" class="resume-wrapper text-center position-relative">
<div class="resume-wrapper-inner mx-auto text-start bg-white shadow-lg">
<header class="resume-header pt-4 pt-md-0">
<div class="row">
@foreach (var jobSeeker in ViewBag.BasicList)
{
<div class="col-block col-md-auto resume-picture-holder text-center text-md-start">
@{
var photopath = "../Content/JobSeeker/Image/";
var imagePath = string.Format("{0}{1}", photopath, jobSeeker.Photo);
}
<img class="picture" src="@imagePath" alt="" />
</div>
<div class="col">
<div class="row p-4 justify-content-center justify-content-md-between">
<div class="primary-info col-auto">
<h1 class="name mt-0 mb-1 text-white text-uppercase text-uppercase">@jobSeeker.FullName</h1>
@*<div class="title mb-3">Full Stack Developer</div>
*@
<ul class="list-unstyled">
<li><a class="text-link" href="#"><i class="fas fa-map-marker-alt fa-fw"></i>@jobSeeker.Address</a></li>
<li class="mb-2"><a class="text-link" href="#"><i class="far fa-envelope fa-fw me-2" data-fa-transform="grow-3"></i>@jobSeeker.EmailId</a></li>
<li><a class="text-link" href="#"><i class="fas fa-mobile-alt fa-fw me-2" data-fa-transform="grow-6"></i>@jobSeeker.MobileNo</a></li>
</ul>
</div>
<!--//primary-info-->
<div class="secondary-info col-auto mt-2">
<ul class="resume-social list-unstyled">
<li class="mb-3"><a class="text-link" href="#"><span class="fa-container text-center me-2"><i class="fab fa-linkedin-in fa-fw"></i></span>@jobSeeker.ProfileUrl</a></li>
<li class="mb-3"><a class="text-link" href="#"><span class="fa-container text-center me-2"><i class="fas fa-user fa-fw"></i></span>@jobSeeker.Gender</a></li>
<li><a class="text-link" href="#"><span class="fa-container text-center me-2"><i class="fas fa-globe"></i></span>yourwebsite.com</a></li>
</ul>
</div>
<!--//secondary-info-->
</div>
<!--//row-->
</div>
<!--//col-->
}
</div>
<!--//row-->
</header>
</div>
<!--//resume-body-->
</div>
</article>
}
</body>
</html>