Share
Report
6,211Hi All,
I have created report in Web resource which is an HTML Report, now i want it to download in PDF, below is my sample code which i am using, but somehow when i am adding <style> tag it is not working. but when i remove <style> tag it is working.
<html><head><meta charset="utf-8"></head>
<body style="padding: 10px; color: rgb(48, 47, 44); font-family: Arial, Helvetica, sans-serif; font-size: 120%; font-weight: bold; overflow-wrap: break-word;" onfocusout="parent.setEmailRange();">
<title>Service Order Report</title>
<script src="code.jquery.com/jquery-1.12.4.min.js" ></script>
<script src="cdnjs.cloudflare.com/.../jspdf.min.js"></script>
<script>
// create canvas object
var
form = "";
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('bhavdip-html-to-pdf.pdf');
form.width(cache_width);
});
}
(function () {
//create pdf
setTimeout(function(){
debugger;
var downloadLink = '<div class="no-print"style="width:700px;background:#ffffcc;border: 1px solid #bcae67;text-align:center;padding:10px;margin-bottom:10px;">';
downloadLink += '<div id="downloadData" style="display:none;"></div>';
downloadLink += '<a style="font-weight:bold;font-size:120%;font-family: Arial, Helvetica, sans-serif;color:#302f2c;"';
downloadLink += 'href = "#" onclick=createPDF();';
downloadLink += 'return false;">Download Report</a>';
downloadLink += '</div>';
$('html').html(("<html><head><title>Testing</title></head><style></style><body><div><p>test in progress</p></div></body></html>").replace('<body>', '<body>' + downloadLink));
form = $('body'),
cache_width = form.width(),
a4 = [595.28, 841.89]; // for a4 size paper width and height
}, 1000);
}());
</script>
<script>
(function ($) {
$.fn.html2canvas = function (options) {
var date = new Date(),
$message = null,
timeoutTimer = false,
timer = date.getTime();
html2canvas.logging = options && options.logging;
html2canvas.Preload(this[0], $.extend({
complete: function (images) {
var queue = html2canvas.Parse(this[0], images, options),
$canvas = $(html2canvas.Renderer(queue, options)),
finishTime = new Date();
$canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);
$canvas.siblings().toggle();
$(window).click(function () {
if (!$canvas.is(':visible')) {
$canvas.toggle().siblings().toggle();
throwMessage("Canvas Render visible");
} else {
$canvas.siblings().toggle();
$canvas.toggle();
throwMessage("Canvas Render hidden");
}
});
throwMessage('Screenshot created in ' + ((finishTime.getTime() - timer) / 1000) + " seconds<br />", 4000);
}
}, options));
function throwMessage(msg, duration) {
window.clearTimeout(timeoutTimer);
timeoutTimer = window.setTimeout(function () {
$message.fadeOut(function () {
$message.remove();
});
}, duration || 2000);
if ($message)
$message.remove();
$message = $('<div></div>').html(msg).css({
margin: 0,
padding: 10,
background: "#000",
opacity: 0.7,
position: "fixed",
top: 10,
right: 10,
fontFamily: 'Tahoma',
color: '#fff',
fontSize: 12,
borderRadius: 12,
width: 'auto',
height: 'auto',
textAlign: 'center',
textDecoration: 'none'
}).hide().fadeIn().appendTo('body');
}
};
})(jQuery);
</script>
</body></html>
any help would be appreciated.
Regards,
Shahbaaz
*This post is locked for comments
I have the same question (0)
All responses (
Answers (
