我有一个HTML报告,需要打印的景观,因为许多列。是否有一种方法可以做到这一点,而不需要用户更改文档设置?
浏览器中有哪些选项。
我有一个HTML报告,需要打印的景观,因为许多列。是否有一种方法可以做到这一点,而不需要用户更改文档设置?
浏览器中有哪些选项。
当前回答
这对我也很管用:
@media print and (orientation:landscape) { … }
其他回答
你也可以使用非标准的IE-only css属性写入模式
div.page {
writing-mode: tb-rl;
}
如前所述,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文档的链接。
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
在Firefox 16.0.2中不能运行,但在Chrome中可以运行
<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。
如果你正在使用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。