I have 30 columns page and I need to print accommodating all columns in landscape mode. This one is just a test page where I try to print in landscape mode by rotating the page but it is not rotating the page.
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script></head><body>
<div id="rotate">
<table>
<tr>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
<td>Testing Landscape</td>
</tr>
</table></div>
<button class='gen_btn' onclick='PrintPage("#rotate")'>Print</button>
</body></html>
<script>function PrintPage(elem)
{
Popup(jQuery(elem).html(),elem);
}
function Popup(data,divName)
{
var mywindow = window.open('', 'Store Report', 'height=600,width=600');
mywindow.document.write('<style>@media print{#rotate{transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);margin:10px;display: inline-block;}table{display:block;}}</style>');
mywindow.document.write(data);
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
}
</script>
</html>
Page still prints in potrait mode. Here is the fiddle https://jsfiddle.net/2wbo4w8v/