HTML2CANVAS

generate image form HTML to print

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-alpha.3/html2canvas.js"></script>
<body id="mybody">
    <input value="Generate Image" id="save-image" download="YourFileName.jpg" type="button"/>
    <div id="main">
    
    <div id="DIV1" style="left=10px">
CHART1
</div>
<div id="DIV2" style="left:1020px">
CHART2
</div>

<div id="DIV3" style="top:220px;left:10px">
CHART3
</div>
<div id="DIV4" style="top:220px;left:1020px">
CHART4
</div>
    </div>
    
</body>

CSS

@media print {
	
	@page {
		size: landscape;
		margin: 0%;
	}
	
	body {
		/*zoom:10%;*/
		//transform: scale(0.1);
	}
	
}

div {
	position:absolute;
	width:1000px;
	height:200px;
	background-color:red;
  zoom: 50%;
}
body {
	background-color:#F0F0F0;
	}

#main {
            margin: 0 auto;
            width: 100%;
            min-height: 100%;
            font-weight: bold;
            background: white url('prompt-save-bg.jpg') center top repeat-y;
            max-width: 1263px; /* background-limit*/
            text-align: center;
        }

JavaScript

//<!CDATA[
    function save(canvas) {/*html2canvas-0.5.0 work with Promise.js*/
        document.body.appendChild(canvas)
    }
    $(document).ready(function(){
        $('#save-image').click(function () {
            html2canvas(document.body, {
                allowTaint: true,
                logging: true,
                taintTest: false
            }).then(save);/*0.5.0-rc*/
        });
    });
    //]]>