Dynamics Community Forum Thread Details

Hi 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

Convert HTML to PDF

Helpful resources

News and Announcements

Quick Links

December Spotlight Star - Muhammad Affan

Community AMA December 12th

New! Quick response templates⚡

Leaderboard

Featured topics

Product updates