我有一个HTML报告，需要打印的景观，因为许多列。是否有一种方法可以做到这一点，而不需要用户更改文档设置?
浏览器中有哪些选项。
当前回答
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
在Firefox 16.0.2中不能运行，但在Chrome中可以运行
其他回答
试着添加这样的CSS:
@page {
size: landscape;
}
你可以尝试以下方法:
@page {
size: auto
}
你也可以使用非标准的IE-only css属性写入模式
div.page {
writing-mode: tb-rl;
}
这是我想到的-添加一个负旋转<html>元素和一个正旋转等于abs值<身体>。这节省了添加大量的CSS样式的身体，它的工作就像一个魅力:
html {
transform: rotate(-90deg);
}
body {
transform: rotate(90deg);
}
如果你正在使用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。
