Home » Javascript » How to print div in landscape mode in angularjs

How to print div in landscape mode in angularjs

Posted by: admin October 18, 2018 Leave a comment

Questions:

I have a table with some datas. In my screen its in correct format, but i want on click of print button, it should print the div in landscape mode.

jsfiddle

In this example, if I click print it will print the page exactly what it is. But i want to print in landscape. Can anyone please tell me how to do this?

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Form</title>
</head>
<body>
<center>
<div id="printable" align="center">
<font face="algerian, sans-serif" size="+2">AROPOLIS INSUARANCE BROKERS LTD. </font><br><font size="-1">
2<sup>nd</sup> Floor, Shamneel Court, Parklands Road, Nairobi, Kenya. <br>
P.O. Box 1157, Sarit Centre, Post Offive, Nairobi 00606, Kenya. <br>
Telephones 020 - 4444746 / 7 / 8, Fax 020 - 4444745. Email info@acropolisinsurance.com</font>
</div>
</center>
<p>
  <style>
body{
  -webkit-print-color-adjust:exact;
}
</style>
  <style type="text/css">
    #printable { display: none; }
    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
    <style>
.break { page-break-before: always; }
</style>
<style>
@page {
  size: a4 portrait;
  margin: 0;
  padding: 0;
  margin-top: 20mm;
}
</style>
<style>
.rotate {
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
</p>
<center>
<table width="782"  border="1" style="border-collapse:collapse;">
  <tr>
    <td width="702"><div align="center"><strong>CLAIM FORM FOR PROPERTY DAMAGE OR LOSS.</strong></div>
      Applicable to Fire, Special Perils, Home Covers, Theft, All-Risks, Money, Baggage and Glass. The issue of this form is not an admission of liability on the part of the company. All questions must be answered in full.
    </td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td width="468"><p>Name of Insurer:  
    </p></td>
    <td width="300"><p>Type of Cover:  
      </td>
  </tr></table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td width="267">Policy <br/>Number:  <input type="text" class="input" size="30"></td>
    <td width="263">Renewal<br/>date: <br/></td>
    <td width="230"><p>Last premium <br/>
    date paid on: </p></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td class="hdr"><font color="#FFFFFF" style="border-collapse:collapse;">INSURED</font></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td>Name: <?php echo $firstname; ?> <?php echo $middlename; ?> <?php echo $lastname; ?></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td>Occupation / Profession: <?php echo $occupation; ?></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td>Address: <?php echo $physadd; ?></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td>Telephone: <?php echo $mobileno; ?></td>
    <td>Fax/Email: <?php echo $email; ?></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td class="hdr"><font color="#FFFFFF" >CIRCUMSTANCES GIVING RISE TO A CLAIM</font></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td width="267">Date of <br/>Loss </td>
    <td width="263">Time of <br/>Loss </td>
    <td width="230"><p>When/Who discovered <br/>the loss or damage 
         </p></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td height="1" style="border-collapse:collapse;"><p>Describe fully how the loss or damage occured
      </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
<p>&nbsp;</p>
    </td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td class="hdr"><font color="#FFFFFF">GENERAL INFORMATION</font></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td>Type of premises involved</td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td><p>Were the permises unoccupied?
     Yes 
        <input type="checkbox"> 
     |
       No <input type="checkbox">. if so, when were they last occupied?</p>
    <p>&nbsp;</p></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td><p>Are the premises self-contained?
     Yes <input type="checkbox"> 
     |
       No <input type="checkbox">. if not, please list the names of other occupants</p>
    <p>&nbsp;</p></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td>Are you the owner of premises? Yes <input type="checkbox"> 
    | No 
    <input type="checkbox"></td>
    <td>Are you responsible for repairs? Yes <input type="checkbox"> 
    |
    No <input type="checkbox"></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td height="1"><p>Have you any suspicion as to parties implicated? Yes
      <input type="checkbox">
      | No
      <input type="checkbox">
    </p></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td height="1"><p>Is there any other insurance in force providing covers for this loss? If so, give particulars including insurers name, address, policy numbers, type of policy, etc.</p>
      <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td height="1"><p>Have you suffered similar loss or damage in the past? If so, give particulars and whether claim was made on insurers</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td height="1" style="border-collapse:collapse;"><p>At the time of loss, what was<br/>
        the value of: a) the buildings? _______________________   b) all the property in the premises? _______________________</p>
    </td>
  </tr>
</table>
<p class="break"></p>
<table border="1" width="782" style="border-collapse:collapse; size: a4 portrait;">
  <tr>
    <td colspan="3" class="hdr" ><font color="#FFFFFF" >Complete in all cases involving THEFT, MALICIOUS DAMAGE or MISSING ARTICLES</font></td>
  </tr>
  <tr>
    <td colspan="3"><p>When were the Police notified (date &amp; time)?
    </p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>Address of the Police Station?</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>what other steps have you taken to recover property?
    </p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>Give full details of method of entry to premmises</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>If alarm intalled, did it function properly? If not, give reasons
    </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>Are guards employed? If so, name the firm
    </p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>Do other parties i.e. banks have an interest on property lost or damaged? If so, state reasons
      </p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3" class="hdr"><font color="#FFFFFF" >Compete in all cases involving loss in transit</font></td>
  </tr>
  <tr>
    <td colspan="3"><p>Starting point and destination of transit
    </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>Who was accompanying property lost or damaged?</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>If employees, state names, age and duties</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>Are they insured under Fidelity Guarantee Policy? If so, give insurer's name, address and policy number</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="2">How often is<br/> this transit made?</td>
    <td width="543" colspan="1">What is maximum ever<br/> carried at on time?</td>
  </tr>
  <tr>
    <td colspan="3" class="hdr"><font color="#FFFFFF" >AMOUNT CLAIMED</font></td>
  </tr>
  <tr>
    <td colspan="3">Kenyan Shilings <br/>
    Amount_________________________________Please refer to the following pages for details</td>
  </tr>
  <tr>
    <td colspan="3">I / we declare that I / wehave not withheld any material information and that all statments made on this form are true to the best of my / our knowledge and belief. And that articles and property described overleaf belong to me / us, and that no other person has any interest whether as owner, mortgagee, trustee or otherwise except as mentioned in the policy.</p>
    <p>Date____________________  Signature_____________________________________________</td>
  </tr>
    <td colspan="3"> <div align="right">(If policy Holder body corporate, title of person signing & Company Stamp)</div></td>
  </tr>
</table>
<p class="break"></p>


</center>
<div id="non-printable" align="center">
<a href="logout.php">logout</a> | <a class="newww" href= "javascript:window.print();">Print</a></div>
</body>
</html>
Answers: