<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<input type="button" id="btnDownload" value="Download" class="floatRight loginBtn" style="margin-left: 10px; vertical-align: top; margin-top: -15px;" onclick="return DownloadResume();" />
function DownloadResume() {
var pdf = new jsPDF();
html2canvas(document.querySelector("#dvInformation")).then(canvas => {
if (pdf) {
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
var imgData = canvas.toDataURL("image/jpeg", 1.0);
pdf.addImage(imgData, 'JPEG', 0, 0, width, height);
pdf.save("ABCDEF.pdf");
}
});
return false;
}
https://github.com/MrRio/jsPDF/issues/434
function OnDownloadSuccess(data) {
var html = Mustache.to_html(JSON.parse(data.d).Template, JSON.parse(unescape(JSON.parse(data.d).data)));
jQuery.ajax({
type: "POST",
url: "/resume/resumebuilder.aspx/DownloadPdf",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ 'html': html }),
beforeSend: function (data) {
jQuery("#page_loader").show();
},
success: function (data) {
//window.open(data.d, "_blank");
debugger;
var link = document.createElement('a');
link.href = data.d;
link.download = data.d.replace("/UploadFile/", "");
link.click();
},
error: function (data) {
console.log(data);
}
});
jQuery("#page_loader").hide();
}
[WebMethod]
public static string DownloadPdf(string html)
{
StringBuilder rawHtml = new StringBuilder();
string userId = HttpContext.Current.Session["UserId"].ToString();
string filePath = HttpContext.Current.Server.MapPath("/UploadFile/resume/" + userId);
string filename = "resume" + DateTime.Now.ToString("yyyyMMddHHmmssfff") + ".pdf";
var pathForDownLoad = "/UploadFile/resume/" + userId + "/" + filename;
if (File.Exists(filePath + "/" + filename))
{
File.Delete((filePath + "/" + filename));
}
//Create Directory for resume.
if (!Directory.Exists(filePath))
{
Directory.CreateDirectory(filePath);
}
string newFilePath = filePath + "/" + filename;
var pdfConverter = new ExpertPdf.HtmlToPdf.PdfConverter();
pdfConverter.PdfDocumentOptions.PdfPageSize = PdfPageSize.A4;
pdfConverter.PdfDocumentOptions.PdfCompressionLevel = PdfCompressionLevel.Normal;
pdfConverter.PdfDocumentOptions.TopMargin = 3;
pdfConverter.PdfDocumentOptions.BottomMargin = 5;
pdfConverter.PdfDocumentOptions.LeftMargin = 3;
pdfConverter.PdfDocumentOptions.RightMargin = 3;
pdfConverter.PdfDocumentOptions.GenerateSelectablePdf = true;
pdfConverter.PdfDocumentOptions.FitWidth = true;
pdfConverter.LicenseKey = "NcfrwVNqRuy8C89JE0u5jD+1qHuR4LNYDIllvtLUbWU2/qxXtWdia914qaYUXGig";
if (!string.IsNullOrEmpty(html))
{
rawHtml.Append("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
rawHtml.Append("<html>");
rawHtml.Append("<head>");
rawHtml.Append("<title>");
rawHtml.Append("Resume");
rawHtml.Append("</title>");
rawHtml.Append("</head>");
rawHtml.Append("<body>");
rawHtml.Append(html);
rawHtml.Append("</body>");
rawHtml.Append("</html>");
}
byte[] pdfBytes = pdfConverter.GetPdfBytesFromHtmlString(rawHtml.ToString());
System.Web.HttpResponse response = System.Web.HttpContext.Current.Response;
response.Clear();
response.AddHeader("Content-Type", "binary/octet-stream");
response.AddHeader("Content-Disposition",
"attachment; filename=" + "resume.pdf" + "; size=" + pdfBytes.Length.ToString());
File.WriteAllBytes(newFilePath, pdfBytes);
return pathForDownLoad;
}
//jQuery('html, body').animate({ scrollTop: 0 }, {
// duration: 0, complete: function () {
// if (flag === 0) {
// flag = 1;
// var quotes = document.querySelector("#dvInformation");
// html2canvas(quotes).then(canvas => {
// //! MAKE YOUR PDF
// var pdf = new jsPDF('p', 'pt', 'letter');
// for (var i = 0; i <= quotes.clientHeight / 1200; i++) {
// //! This is all just html2canvas stuff
// var srcImg = canvas;
// var sX = 0;
// var sY = 1200 * i; // start 1200 pixels down for every new page
// var sWidth = 950;
// var sHeight = 1200;
// var dX = 0;
// var dY = 0;
// var dWidth = 944;
// var dHeight = 1200;
// window.onePageCanvas = document.createElement("canvas");
// onePageCanvas.setAttribute('width', 944);
// onePageCanvas.setAttribute('height', 1200);
// var ctx = onePageCanvas.getContext('2d');
// // details on this usage of this function:
// // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
// ctx.drawImage(srcImg, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight);
// //document.body.appendChild(canvas);
// var canvasDataURL = onePageCanvas.toDataURL("image/jpg", 5.0);
// var width = onePageCanvas.width;
// var height = onePageCanvas.clientHeight;
// //! If we're on anything other than the first page,
// // add another page
// if (i > 0) {
// pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
// }
// //! now we declare that we're working on that page
// pdf.setPage(i + 1);
// //! now we add content to that page!
// pdf.addImage(canvasDataURL, 'jpg', 10, 40, (width * .62), (height * .62));
// }
// //! after the for loop is finished running, we save the pdf.
// pdf.save('resume_ ' + getFormattedTime() + '.pdf');
// });
// jQuery("#page_loader").hide();
// }
// }
//});
<div id="download-template" style="display: none; width: 450px;" class="mail-popup resume-download-popup">
<p class="title">Information</p>
<div class="inputRow BottomBtns">
<p>Do you want to download the resume?</p>
<br />
<br />
<input type="submit" id="btnDownloadTemplate" value="Yes" class="loginBtn">
<input type="submit" id="btnCancelDownload" value="Cancel" class="loginBtn">
</div>
</div>
HttpContext.Current.Session["ResumeTemplateId"].ToString()
function OnDownloadSuccess1(data) {
var html = Mustache.to_html(JSON.parse(data.d).Template, JSON.parse(unescape(JSON.parse(data.d).data)));
jQuery("#dvInformation").show();
jQuery("#dvInformation").html('').append(html);
DownloadResume1();
}
function DownloadResume() {
$(".overlay").fadeIn();
jQuery("#page_loader").show();
var flag = 0;
var template = document.querySelector("#dvInformation");
jQuery('html, body').animate({ scrollTop: 0 }, {
duration: 0, complete: function () {
debugger;
if (flag === 0) {
flag = 1;
var HTML_Width = $("#dvInformation").width();
var HTML_Height = $("#dvInformation").height();
var top_left_margin = 15;
var PDF_Width = HTML_Width + (top_left_margin * 2);
var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;
var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
html2canvas($("#dvInformation")[0], { allowTaint: true }).then(function (canvas) {
canvas.getContext('2d');
console.log(canvas.height + " " + canvas.width);
var imgData = canvas.toDataURL("image/png", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'PNG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
for (var i = 1; i <= totalPDFPages; i++) {
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'PNG', 10, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
}
pdf.save('resume_ ' + getFormattedTime() + '.pdf');
});
}
jQuery("#page_loader").hide();
$(".overlay").fadeOut();
}
});
flag = 0;
}
function getFormattedTime() {
var today = new Date();
var y = today.getFullYear();
// JavaScript months are 0-based.
var m = today.getMonth() + 1;
var d = today.getDate();
var h = today.getHours();
var mi = today.getMinutes();
var s = today.getSeconds();
return y + "-" + m + "-" + d + "-" + h + "-" + mi + "-" + s;
}
<div class="inputRow">
<label for="userEmprTillDate" class="label">Till Date</label>
<input id="ChkBoxTillDate" class="styled-checkbox" name="txtTillDate" type="checkbox" onclick="tillDateWorking()"/>
<label for="styled-checkbox-1"></label>
</div>
<script>
function tillDateWorking() {
debugger
if (jQuery('#ChkBoxTillDate').is(":checked")) {
jQuery("#txtEndDate").attr("data-message", "");
}
else
{
jQuery("#txtEndDate").attr("data-message", "End Date can't be blank.");
}
jQuery("#txtEndDate").val('');
jQuery("#txtEndDate").attr("disabled", "disabled");
}
</script>