如何在angularjs中以横向模式打印div
[英]How to print div in landscape mode in angularjs
问题描述
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. 在我的屏幕上它的格式正确，但我想点击打印按钮，它应该以横向模式打印div。
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> PO 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> </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 ie 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>
1 个解决方案
解决方案1
2 2018-05-23 04:14:05
Hi just change the @page {size: a4 portrait ;} to @page { size: a4 landscape } 您好，只需将@page {size：a4 portrait ;}更改为@page {size：a4 landscape }
in your HTML file. 在您的HTML文件中。 and you should be good to go. 你应该好好去。 Thanks 谢谢
code snippet just in case. 代码片段以防万一。
<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> PO 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 ie 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在横向模式下默认打印 - How to I print By default in landscape mode
使用javascript - 横向模式打印到硬拷贝 - Print to hardcopy using javascript - landscape mode
AngularJS Print Hidden Div - AngularJS Print Hidden Div
print div在angularjs中不起作用 - print div is not working in angularjs
在IE / FireFox / Chrome中横向打印DIV - Print a DIV in landscape in IE/FireFox/Chrome
如何在我的 Vue.js 项目中以横向模式打印 html 页面 - How can I print html page in Landscape mode in my Vue.js project
AngularJs-如何在Chrome应用程序中打印模式弹出div内容？ - AngularJs - How to print modal pop div content in chrome app?
使用 AngularJs 打印 Div 内容 - Print Div Content Using AngularJs
如何在不同的手机中定位横向模式 - how to target landscape mode in different mobile phones
如何仅在横向模式下显示页面？ - How to show page only in landscape mode?
相关标签