javascript - 如何在angularjs中以横向模式打印div-6ren

javascript - 如何在angularjs中以横向模式打印div

转载作者：可可西里更新时间：2023-11-01 13:20:28

我有一个包含一些数据的表格。在我的屏幕上它的格式正确，但我想点击打印按钮，它应该以横向模式打印 div。

jsfiddle

在此示例中，如果我单击“打印”，它将按原样打印页面。但我想横向打印。谁能告诉我该怎么做？

<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>

最佳答案

您好，只需将@page {size: a4 portrait;} 更改为@page { size: a4 landscape

在您的 HTML 文件中。你应该可以开始了。谢谢

以防万一的代码片段。

<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 landscape; 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> </p> <p> </p> <p> </p> <p> </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> </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> </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> </p> <p> </p> <p> </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> </p> <p> </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 & time)? </p> <p> </p></td> </tr> <tr> <td colspan="3"><p>Address of the Police Station?</p> <p> </p></td> </tr> <tr> <td colspan="3"><p>what other steps have you taken to recover property? </p> <p> </p></td> </tr> <tr> <td colspan="3"><p>Give full details of method of entry to premmises</p> <p> </p> <p> </p></td> </tr> <tr> <td colspan="3"><p>If alarm intalled, did it function properly? If not, give reasons </p> <p> </p> <p> </p></td> </tr> <tr> <td colspan="3"><p>Are guards employed? If so, name the firm </p> <p> </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> </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> </p> <p> </p></td> </tr> <tr> <td colspan="3"><p>Who was accompanying property lost or damaged?</p> <p> </p></td> </tr> <tr> <td colspan="3"><p>If employees, state names, age and duties</p> <p> </p> <p> </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> </p> <p> </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>