打印 CSS 中的混合纵向和横向页面

Question

I have a report that I want to print using CSS such that the first page is landscape and the second page is portrait.我有一份报告，我想使用 CSS 打印，第一页是横向，第二页是纵向。 When I do this, the first page is fine, but the second page looks like a landscape page cropped into a portrait frame.当我这样做时，第一页很好，但第二页看起来像裁剪成纵向框架的横向页面。 That is, when centering text, it puts the midpoint at 5.5 inches (on 8.5x11 letter paper) and the page will break at only 8.5 inches high:也就是说，当居中文本时，它将中点放在 5.5 英寸（在 8.5x11 信纸上），页面将仅在 8.5 英寸高处中断：

打印预览屏幕截图

I can cheat by giving the second-page div a width of 75%.我可以通过为第二页 div 设置 75% 的宽度来作弊。 This gets the text centered and everything formatted correctly, but the page content still cuts off at 8.5in.这使文本居中并且所有内容都正确格式化，但页面内容仍然在 8.5 英寸处被切断。 Messing with the height will do nothing, since that will just continue to wrap to a new page.弄乱高度将无济于事，因为它只会继续换行到新页面。

I only need this to work in Google Chrome for right now, since this is special-purpose and not public use.我现在只需要它在谷歌浏览器中工作，因为这是特殊用途而不是公共用途。

Here is my test code:这是我的测试代码：

<style type="text/css">

@media print {
body { margin: 0; text-align: center; }

@page {
    margin: 0.1in 0.5in 0.1in 0.5in;
    size: letter portrait;
}

@page :first {
    margin: 0.1in 0.5in 0.1in 0.5in;
    size: letter landscape;
}

#firstpage { page-break-after: always; }

#secondpage { width: 75%; }

}
</style>

</head>
<body>

<div id="firstpage">
<p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p>
</div>
<div id="secondpage">
<p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p>
</div>

Answer 1

This works for me in Chrome 78 with your example:这适用于我在 Chrome 78 中的示例：

@media print {
    :root {
        width: 75vw;
    }
    #firstpage {
        width: 100vw;
    }
}

It also seems to work fine with more complicated pages too - making the landscape page contents a width of 100vw and everything else a width of 75vw .它似乎也适用于更复杂的页面 - 使横向页面内容的宽度为100vw ，其他所有内容的宽度为75vw 。

打印 CSS 中的混合纵向和横向页面

问题描述

1 个解决方案

解决方案1
0 2019-11-25 20:40:17

打印 CSS 中的混​​合纵向和横向页面

问题描述

1 个解决方案

解决方案1 0 2019-11-25 20:40:17

打印 CSS 中的混合纵向和横向页面

解决方案1
0 2019-11-25 20:40:17