我有一个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。

其他回答

你也可以使用非标准的IE-only css属性写入模式

div.page    { 
   writing-mode: tb-rl;
}
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

在Firefox 16.0.2中不能运行,但在Chrome中可以运行

我面临的问题可能和你一样。这里的每个人都使用CSS来静态地提供它,但我不得不寻找一个动态的解决方案,这样它就会根据活动元素而改变,而无需重新加载页面。

我创建了两个文件,肖像。css和风景。css。

Portrait.css是空的,但是landscape.css只有一行。

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

在我的主文件中,我添加了这一行html来指定portrait.css为默认值。

 <link rel="stylesheet" id="PRINTLAYOUT" href="portrait.css" type="text/css" /></link>

现在,要切换,你只需要改变元素中的href来切换打印模式。

$("#PRINTLAYOUT").attr("href","landscape.css")
  // OR 
document.getElementById("PRINTLAYOUT").href = "landscape.css" // I think...

这对我来说很有效,我希望它能帮助其他人像我一样做艰难的事情。注意,$表示JQuery..如果你还没有使用它,我强烈建议你现在就开始使用。

这对我也很管用:

@media print and (orientation:landscape) { … }

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