如何在AngularJS中以Landscape模式打印指定Div

要让指定的#printable区域以横向（Landscape）模式打印，你只需要调整打印相关的CSS规则，核心是修改页面打印尺寸设置，同时确保打印时仅显示目标区域。下面是具体的修改步骤和完整代码：

关键修改点 #

• 将@page规则里的size: a4 portrait改为size: a4 landscape，强制打印页面为横向
• 整理分散的<style>标签，合并重复规则，提升代码可读性
• 给打印区域内的表格添加自适应宽度，避免横向打印时内容被截断

修改后的完整代码 #

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Form</title>
    <style>
        /* 全局通用样式 */
        body{
            -webkit-print-color-adjust:exact;
        }
        .break {
            page-break-before: always;
        }
        .rotate {
            /* Safari */
            -webkit-transform: rotate(90deg);
            /* Firefox */
            -moz-transform: rotate(90deg);
            /* IE */
            -ms-transform: rotate(90deg);
            /* Opera */
            -o-transform: rotate(90deg);
            /* 旧版IE */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }

        /* 屏幕端默认隐藏打印区域（如果需要屏幕显示可删除此规则） */
        #printable {
            display: none;
        }

        /* 打印专属规则 */
        @media print {
            /* 隐藏非打印内容 */
            #non-printable {
                display: none;
            }
            /* 显示打印目标区域 */
            #printable {
                display: block;
                width: 100%;
                margin: 0 auto;
            }
            /* 设置打印页面为A4横向 */
            @page {
                size: a4 landscape;
                margin: 20mm;
                padding: 0;
            }
            /* 让表格自适应横向页面宽度 */
            #printable table {
                width: 100% !important;
                border-collapse: collapse !important;
            }
        }
    </style>
</head>
<body>
    <!-- 非打印区域（屏幕显示但不需要打印的内容放这里） -->
    <div id="non-printable">
        <!-- 比如打印按钮、页面导航等元素 -->
    </div>

    <!-- 打印目标区域 -->
    <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>

        <table border="1" style="border-collapse:collapse;">
            <tr>
                <td><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 border="1" style="border-collapse:collapse;">
            <tr>
                <td><p>Name of Insurer: </p></td>
                <td><p>Type of Cover: </p></td>
            </tr>
        </table>
        <table border="1" style="border-collapse:collapse;">
            <tr>
                <td>Policy <br/>Number: <input type="text" class="input" size="30"></td>
                <td>Renewal<br/>date: <br/></td>
                <td><p>Last premium <br/> date paid on: </p></td>
            </tr>
        </table>
        <table border="1" style="border-collapse:collapse;">
            <tr>
                <td class="hdr"><font color="#FFFFFF" style="border-collapse:collapse;">INSURED</font></td>
            </tr>
        </table>
        <table border="1" style="border-collapse:collapse;">
            <tr>
                <td>Name: <?php echo $firstname; ?> <?php echo $middlename; ?> <?php echo $lastname; ?></td>
            </tr>
        </table>
        <table border="1" style="border-collapse:collapse;">
            <tr>
                <td>Occupation / Profession: <?php echo $occupation; ?></td>
            </tr>
        </table>
        <table border="1" style="border-collapse:collapse;">
            <tr>
                <td>Address: <?php echo $physadd; ?></td>
            </tr>
        </table>
        <table border="1" style="border-collapse:collapse;">
            <tr>
                <td>Telephone: <?php echo $mobileno; ?></td>
                <td>Fax/Email: <?php echo $email; ?></td>
            </tr>
        </table>
        <table border="1" style="border-collapse:collapse;">
            <tr>
                <td class="hdr"><font color="#FFFFFF" >CIRCUMSTANCES GIVING RISE TO A CLAIM</font></td>
            </tr>
        </table>
        <table border="1" style="border-collapse:collapse;">
            <tr>
                <td>Date of <br/>Loss </td>
                <td>Time of <br/>Loss </td>
                <td><p>When/Who discovered <br/>the loss or damage </p></td>
            </tr>
        </table>
        <table border="1" style="border-collapse:collapse;">
            <tr>
                <td 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>
    </div>
</body>
</html>

额外说明 #

• 如果希望#printable区域在屏幕上也正常显示，直接删除#printable { display: none; }这条规则即可
• @page的margin值可以根据实际需求调整，确保打印内容的边距符合要求
• 添加#printable table { width: 100% !important; }是为了让表格在横向页面中自动适配宽度，避免内容溢出

内容的提问来源于stack exchange，提问作者sathish kumar