JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<div id="list_table">
	        <h2>Total project found: 2 <input class="print-button" type="button" onclick="printDiv('printableArea')" value="Print"> </h2>
		<div id="printableArea">
			<div class="print-header">
				<div class="printHead">
				    <h2 class="ptitle">
				    দুর্যোগ ব্যাবস্থাপনা ও ত্রান মন্ত্রনালয়
				    </h2>  
				    <h3>
				      কাজের বিনিময়ে খাদ্য প্রকল্প
				     </h3>
				</div>
				<div class="print-middle">

				    <div class="print-logo">
					    <img src="http://192.185.183.190/~ssnp/spmis/images/logo.png">
					</div>
				    <div class="report-date">
				  
				    					    প্রতিবেদনের তারিখঃ (২০১৬-০১-০৫) 
				    </div>

				</div>
			  	<div class="ptable-header">
				  					          <div class="psection">
				            <span>বিভাগঃ</span>
		                           বরিশাল				          </div>
				    							  <div class="psection">
									<span>জেলাঃ</span>
		                                                         ভোলা				          </div>
				    					          <div class="psection">
				          				          
									<span>উপজেলাঃ</span>
		                                                মনপুরা				          </div>
				    					          <div class="psection">
									<span>ইউনিয়নঃ</span>
			                                   	সাকুচিয়া	
				          </div>
				          
			  
			  	</div>
			</div>
	 
	        <table>
				<thead>
					<tr><th>ক্রমিক নং</th>
					<th class="psub">প্রকল্পের ধরন</th>
					<th class="punit">সংখ্যা</th>
                    <th class="punit">একক</th>
					<!--<th>দৈর্ঘ্য</th>
					<th>প্রস্থ</th>
					<th>উচ্চতা/গভীরতা </th>
					<th>ক্ষেত্রফল</th>
					<th>অন্যান্য</th>		-->
					<th class="ptotal">বরাদ্দের পরিমাণ</th>
					<th class="ptotal">ব্যয়ের পরিমাণ</th>
					<th class="pyear">অগ্রগতীর হার %</th>	
				
				</tr></thead>
								<tbody><tr>
					<td>1</td>
					<td class="pdes">
	                                     রাস্তা নির্মাণ	                                               ...

CSS

.print-button {
    width: 120px;
    height: 30px;
    background: #1abc9c;
    color: #FFFFFF;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    float: right;
}

.print-header, .print-footer {
  display: none;
}

@media print { 
 /* All your print styles go here */
 .print-header, .print-footer {
  display: inherit;
 }
 .print-footer {
    float: left;
    width: 100%;
    padding-top: 20%;
}
.pfooter {
    float: right;
    /* padding-top: 6%; */
    border-top: 1px solid black;
}
 .print-middle {
    float: left;
    width: 100%;
}
.ptable-header {
    float: left;
    padding-top: 4%;
    width: 100%;
}
.printHead {
    text-align: center;
    margin: 0 auto;
}
.psection {
    width: 25%;
    float: left;
}


.print-logo {
    float: left;
    width: 80px;
}
.print-logo img {
    width: 78px;
}
.report-date {
    float: right;
}
.psub {
    width: 40%;
}
.punit {
    width: 11%;
}
.pdes {
    width: 21%;
}
.pyear {
    width: 11%;
}
.ptotal {
    width: 12%;
}
}

JavaScript

function printDiv(divName) {
  
            var divElements = document.getElementById(divName).innerHTML;
            //Get the HTML of whole page
            var oldPage = document.body.innerHTML;

            //Reset the page's HTML with div's HTML only
            document.body.innerHTML = 
              "<html><head><title></title></head><body> <div style='width: 21cm; margin:0 auto;'>" + 
              divElements + "</div></body>";

            //Print Page
            window.print();

            //Restore orignal HTML
            document.body.innerHTML = oldPage;
}