html媒体打印肖像和风景混合

问题描述

我有一个用例，我想以纵向打印第一页，而所有其他以横向打印，我都有这个HTML代码

这是媒体打印CSS

@media print {
            @page {
                size: A4 landscape;
            }
            @page deliverypage {
                size: A4 portrait;
                margin: 15mm 15mm 15mm 15mm;
                Box-sizing: border-Box;
                /*
            @top-center { content: element( theheader ); }
            @bottom-center { content: element( thefooter ); }
            */
            }
            @page legalpage {
                size: A4 landscape;
                margin: 15mm 15mm 15mm 15mm;
                Box-sizing: border-Box;
                /*
            @top-center { content: element( theheader ); }
            @bottom-center { content: element( thefooter ); }
            */
            }
            @page mainpage {
                size: A4 landscape;
                margin: 15mm 15mm 15mm 15mm;
                Box-sizing: border-Box;
                max-height: 150mm;

                /*
            @top-center { content: element( theheader ); }
            @bottom-center { content: element( thefooter ); }
            */
            }
            html,body {
                height: auto;
                /* min-height: 100%; */
                display: block;
                zoom: 100%;
            }
            header.trackem-header {
                position: fixed;
                top: 0;
                width: calc(100% - 2em);
            }
            footer.trackem-footer {
                position: fixed;
                bottom: 0;
                width: calc(100% - 2em);
            }
            .placeholder-for-common-header {
                display: block;
            }
            .placeholder-for-common-footer {
                display: block;
            }
            .delivery-info-table {
                page: deliverypage;
                margin: 0;
                width: 100%;
            }
            .items-info-table {
                page: mainpage;
                page-break-before: always;
                margin: 0;
                width: 100%;
                height:100%;
                /*
                min-width: 260mm !important;
                background-color: red;
                overflow-x: visible;
                */
            }
            .legal-info-table {
                page: legalpage;
                page-break-before: always;
                margin: 0;
                width: 100%;
            }
            tbody {
                page-break-inside: avoid;
            }
            thead {
                display: table-header-group;
                page-break-inside: avoid;
            }
            tfoot {
                display: table-row-group;
            }
            tr {
                page-break-inside: avoid;
                page-break-after: auto !important;
            }
            .maintable>tbody {
                page-break-inside: auto !important;
            }
            .maintable>tbody>tr {
                page-break-inside: avoid !important;
                page-break-before: auto !important;
                page-break-after: auto !important;
            }
            .trackem-footer {
                page-break-inside: avoid;
            }
            .items-info-table>tbody {
                page-break-inside: auto !important;
            }
            .items-info-table>tbody>tr {
                page-break-inside: avoid !important;
                page-break-before: auto !important;
                page-break-after: auto !important;
            }
            .items-info-table>tbody>tr:nth-of-type(7n) {
                page-break-after: always !important;
            }
        }

当我打印内容时，其结果如下：

如果我手动更改内容的宽度，则内容不适合页面，它将进入空白区域。谁知道我该如何克服这个问题？谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）