我的解决方案:

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>

With media="print"只适用于print。 这适用于IE, Firefox和Chrome

在CSS中，您可以设置如下所示的@page属性。

@media print{@page {size: landscape}}

@page是css2.1规范的一部分，但是这个尺寸并没有像回答“@page {size:landscape}过时了吗?：

CSS 2.1不再指定size属性。目前的工作 CSS3页面媒体模块的草案没有指定它(但这不是 标准或接受)。

如上所述，大小选项来自css3草案规范。理论上，它可以设置为页面大小和方向，尽管在我的示例中，大小被省略了。

这种支持与firefox中的bug报告混合在一起，大多数浏览器都不支持它。

它在IE7中似乎可以工作，但这是因为IE7会在打印预览中记住用户上次选择的横屏或竖屏(只有浏览器会重新启动)。

本文确实提出了一些使用JavaScript或ActiveX向用户浏览器发送密钥的建议，尽管它们并不理想，并且依赖于更改浏览器的安全设置。

或者，您可以旋转内容而不是页面方向。这可以通过创建一个样式并将其应用到包含这两条线的主体上来实现，但这也会产生许多对齐和布局问题。

<style type="text/css" media="print">
    .page
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

我找到的最后一个替代方案是在PDF中创建一个横向版本。你可以指向，当用户选择打印时，它会打印PDF。然而，我不能让这个自动打印工作在IE7。

<link media="print" rel="Alternate" href="print.pdf">

总之，在一些浏览器中，使用@page size选项相对容易，但在许多浏览器中，没有确定的方法，这将取决于你的内容和环境。 这可能是为什么谷歌文档在选择打印时创建PDF，然后允许用户打开并打印。

引用自css - discussion Wiki

The @page rule has been cut down in scope from CSS2 to CSS2.1. The full CSS2 @page rule was reportedly implemented only in Opera (and buggily even then). My own testing shows that IE and Firefox don't support @page at all. According to the now-obsolescent CSS2 spec section 13.2.2 it is possible to override the user's setting of orientation and (for example) force printing in Landscape but the relevant "size" property has been dropped from CSS2.1, consistent with the fact that no current browser supports it. It has been reinstated in the CSS3 Paged Media module but note that this is only a Working Draft (as at July 2009). Conclusion: forget about @page for the present. If you feel your document needs to be printed in Landscape orientation, ask yourself if you can instead make your design more fluid. If you really can't (perhaps because the document contains data tables with many columns, for example), you will need to advise the user to set the orientation to Landscape and perhaps outline how to do it in the most common browsers. Of course, some browsers have a print fit-to-width (shrink-to-fit) feature (e.g. Opera, Firefox, IE7) but it's inadvisable to rely on users having this facility or having it switched on.

如果你正在使用React和MUI这样的库，在React应用中使用纯CSS并不是一个好的做法。更好的方法是使用一个名为GlobalStyles的样式组件，我们可以从Material UI导入它。 代码是这样的，

import { GlobalStyles } from '@mui/material';
const printStyle = {
  ['@media print']: {
    ['@page']: {
      size: 'landscape',
      margin: '2px',
     },
   },
 };

您可能不需要在@media打印中使用@page，因为@page仅用于打印。文档

页边距将消除浏览器在打印时生成的url。

我们可以在App容器中使用GlobalStyles。像这样

const App: React.FC = () => (
  <>
     <GlobalStyles styles={printStyle} />
     <AppView />
  </>
 );

当我们调用windows.print()时，它将应用上述CSS。 如果你在使用MUI之外的其他库，应该有一些组件或插件可以用于全局应用CSS。

我尝试了Denis的答案，遇到了一些问题(在使用横向页面后，纵向页面无法正常打印)，所以这里是我的解决方案:

body { margin: 0; background: #CCCCCC; } div.page { margin: 10px auto; border: solid 1px black; display: block; page-break-after: always; width: 209mm; height: 296mm; overflow: hidden; background: white; } div.landscape-parent { width: 296mm; height: 209mm; } div.landscape { width: 296mm; height: 209mm; } div.content { padding: 10mm; } body, div, td { font-size: 13px; font-family: Verdana; } @media print { body { background: none; } div.page { width: 209mm; height: 296mm; } div.landscape { transform: rotate(270deg) translate(-296mm, 0); transform-origin: 0 0; } div.portrait, div.landscape, div.page { margin: 0; padding: 0; border: none; background: none; } } <div class="page"> <div class="content"> First page in Portrait mode </div> </div> <div class="page landscape-parent"> <div class="landscape"> <div class="content"> Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer) </div> </div> </div> <div class="page"> <div class="content"> Third page in Portrait mode </div> </div>

如前所述，size属性是您所需要的。要在打印时设置页面的方向和大小，您可以使用以下命令:

/* ISO Paper Size */
@page {
  size: A4 landscape;
}

/* Size in mm */    
@page {
  size: 100mm 200mm landscape;
}

/* Size in inches */    
@page {
  size: 4in 6in landscape;
}

下面是@page文档的链接。