我有一个HTML报告，需要打印的景观，因为许多列。是否有一种方法可以做到这一点，而不需要用户更改文档设置?
浏览器中有哪些选项。
当前回答
引用自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.
其他回答
仅仅旋转页面内容是不够的。下面是一个正确的CSS，它可以在大多数浏览器(Chrome, Firefox, IE9+)中工作。
首先将正文边距设置为0，否则页面边距将大于您在打印对话框中设置的页边距。同时设置背景颜色以使页面可视化。
body {
margin: 0;
background: #CCCCCC;
}
页边距、边框和背景是可视化页面所必需的。
填充必须设置为所需的打印边距。在打印对话框中，必须设置相同的边距(本例中为10mm)。
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
A4页大小为210毫米x297毫米。你需要从尺寸中减去打印边距。并设置页面内容的大小:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
我使用276mm而不是277mm，因为不同的浏览器对页面的缩放略有不同。所以有些媒体会在两页纸上打印277mm高的内容。第二页将为空。使用276mm更安全。
我们不需要打印页面上的任何边距、边框、填充、背景，所以删除它们:
@media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
注意变换的原点是0 0!另外，横向页面的内容必须向下移动276毫米!
此外，如果你的页面混合了纵向和横向，IE会缩小页面。我们通过将-ms-zoom设置为1.665来修复它。如果你将它设置为1.6666或类似的值，页面内容的右侧边界有时可能会被裁剪。
如果你需要IE8或其他老浏览器的支持，你可以使用-webkit-transform， -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)。但对于足够现代的浏览器来说，这并不是必需的。
这是一个测试页面:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
...Copy all styles here...
</style>
</head>
<body>
<div class="portrait">A portrait page</div>
<div class="landscape">A landscape page</div>
</body>
</html>
如果你正在使用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。
我曾经尝试解决这个问题，但我所有的研究都将我引向了ActiveX控件/插件。浏览器(至少在3年前)没有允许更改任何打印设置(副本数量，纸张大小)的技巧。
我努力提醒用户，当浏览器打印对话框出现时，他们需要选择“横向”。我还创建了一个“打印预览”页面，这比IE6的要好得多!我们的应用程序在一些报告中有非常宽的数据表，打印预览会清楚地告诉用户什么时候表格会溢出纸张的右边缘(因为IE6也不能处理2张纸的打印)。
是的，人们至今仍在使用IE6。
试着添加这样的CSS:
@page {
size: landscape;
}
你可以尝试以下方法:
@page {
size: auto
}
