我有一个HTML报告,需要打印的景观,因为许多列。是否有一种方法可以做到这一点,而不需要用户更改文档设置?
浏览器中有哪些选项。
我有一个HTML报告,需要打印的景观,因为许多列。是否有一种方法可以做到这一点,而不需要用户更改文档设置?
浏览器中有哪些选项。
当前回答
我曾经尝试解决这个问题,但我所有的研究都将我引向了ActiveX控件/插件。浏览器(至少在3年前)没有允许更改任何打印设置(副本数量,纸张大小)的技巧。
我努力提醒用户,当浏览器打印对话框出现时,他们需要选择“横向”。我还创建了一个“打印预览”页面,这比IE6的要好得多!我们的应用程序在一些报告中有非常宽的数据表,打印预览会清楚地告诉用户什么时候表格会溢出纸张的右边缘(因为IE6也不能处理2张纸的打印)。
是的,人们至今仍在使用IE6。
其他回答
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
在Firefox 16.0.2中不能运行,但在Chrome中可以运行
仅仅旋转页面内容是不够的。下面是一个正确的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。
你可以使用css2 @page规则,它允许你将“size”属性设置为横向。
这是我想到的-添加一个负旋转<html>元素和一个正旋转等于abs值<身体>。这节省了添加大量的CSS样式的身体,它的工作就像一个魅力:
html {
transform: rotate(-90deg);
}
body {
transform: rotate(90deg);
}