我尝试了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>

试着添加这样的CSS:

@page {
  size: landscape;
}

<style type="text/css" media="print">
.landscape { 
    width: 100%; 
    height: 100%; 
    margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); 
} 
</style>

如果你想把这个样式应用到一个表格上，那么就用这个样式类创建一个div标签，并在这个div标签中添加table标签，最后关闭div标签。

此表格将仅以横向模式打印，所有其他页面将仅以纵向模式打印。但问题是，如果表的大小大于页面宽度，那么我们可能会丢失一些行，有时也会丢失标题。小心些而已。

祝你有愉快的一天。

谢谢你,亲爱的 Naveen Mettapally。

我曾经尝试解决这个问题，但我所有的研究都将我引向了ActiveX控件/插件。浏览器(至少在3年前)没有允许更改任何打印设置(副本数量，纸张大小)的技巧。

我努力提醒用户，当浏览器打印对话框出现时，他们需要选择“横向”。我还创建了一个“打印预览”页面，这比IE6的要好得多!我们的应用程序在一些报告中有非常宽的数据表，打印预览会清楚地告诉用户什么时候表格会溢出纸张的右边缘(因为IE6也不能处理2张纸的打印)。

是的，人们至今仍在使用IE6。

如果你正在使用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。

你可以使用css2 @page规则，它允许你将“size”属性设置为横向。