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

其他回答

我的解决方案:

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>

With media="print"只适用于print。 这适用于IE, Firefox和Chrome

这对我也很管用:

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

如前所述,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文档的链接。

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

这是我想到的-添加一个负旋转<html>元素和一个正旋转等于abs值<身体>。这节省了添加大量的CSS样式的身体,它的工作就像一个魅力:

html { 
  transform: rotate(-90deg);
}

body { 
  transform: rotate(90deg);
}