从HTML进行横向打印

我有一个HTML报告，需要打印的景观，因为许多列。是否有一种方法可以做到这一点，而不需要用户更改文档设置?

浏览器中有哪些选项。

495191 次浏览
小开

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

div.page    {
writing-mode: tb-rl;
}
小开

你可以使用css2 @page规则，它允许你设置“大小”属性为景观。

小开

试着添加这样的CSS:

@page {
size: landscape;
}
小开
最佳答案

在CSS中，您可以设置如下所示的@page属性。

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

@page是CSS 2.1规范的一部分，但是问题@Page {size:landscape}过时了吗?的答案并没有突出显示这个size:

CSS 2.1不再指定大小属性。目前的工作 CSS3页面媒体模块的草案没有指定它(但这不是

如上所述，size选项来自CSS 3规格草案。理论上，它可以设置为页面大小和方向，尽管在我的示例中，大小被省略了。

这种支持与在firefox中开始提交错误报告混合在一起，大多数浏览器不支持它。

它在IE7中似乎可以工作，但这是因为IE7会在打印预览中记住用户上次选择的横屏或竖屏(只有浏览器会重新启动)。

这篇文章确实有一些建议的工作，使用JavaScript或ActiveX发送密钥到用户的浏览器，尽管它们不是理想的，并依赖于改变浏览器的安全设置。

或者，您可以旋转内容而不是页面方向。这可以通过创建一个样式并将其应用到包含这两条线的主体上来实现，但这也会产生许多对齐和布局问题。

<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

我找到的最后一个替代方案是在PDF中创建一个横向版本。你可以指向，当用户选择打印时，它会打印PDF。然而，我不能让这个自动打印工作在IE7。

<link media="print" rel="Alternate" href="print.pdf">
总之，在一些浏览器中，使用@page size选项相对容易，但在许多浏览器中，没有确定的方法，这将取决于你的内容和环境。 这可能是谷歌文档在选择打印时创建PDF并允许用户打开和打印的原因
小开

我曾经尝试解决这个问题，但我所有的研究都将我引向了ActiveX控件/插件。浏览器(至少在3年前)没有允许更改任何打印设置(副本数量，纸张大小)的技巧。

我努力提醒用户，当浏览器打印对话框出现时，他们需要选择“横向”。我还创建了一个“打印预览”页面，这比IE6的要好得多!我们的应用程序在一些报告中有非常宽的数据表，打印预览会清楚地告诉用户什么时候表格会溢出纸张的右边缘(因为IE6也不能处理2张纸的打印)。

是的，人们至今仍在使用IE6。

小开 
<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标签。

此表格将仅以横向模式打印，所有其他页面将仅以纵向模式打印。但问题是，如果表的大小大于页面宽度，那么我们可能会丢失一些行，有时也会丢失标题。小心些而已。

祝你有愉快的一天。

< p >谢谢你, 内维Mettapally。< / p >
小开

引自CSS-Discuss维基

@page规则已被删除 范围从CSS2到CSS2.1。完整的 据报道，CSS2 @page规则 仅在Opera中实现(并且有缺陷 即使是这样)。我自己的测试证明了这一点 IE和Firefox不支持@page at 所有人。根据现在过时的说法 CSS2规范第13.2.2节 可以覆盖用户的 方向和(用于 例如)强制打印在横向 但相关的“大小”;属性 从CSS2.1中删除，一致 因为现在没有浏览器 支持它。它已在 CSS3的分页媒体模块，但注意 这只是一份工作草案(如 在2009年7月)。

< p >结论:忘记 关于@page目前。如果你 觉得你的文件需要打印 在横向方向上，问自己 如果你可以做你的设计 更多的液体。如果你真的不能 (可能是因为文档包含 具有多列的数据表，用于 例)，您将需要建议 用户将方向设置为 景观，也许大纲如何 在最常见的浏览器中执行此操作。的 当然，有些浏览器会打印 贴合宽度(收缩贴合)功能 (例如Opera, Firefox, IE7)但它是 不可取的依赖用户拥有 这个设施或者把它换掉 < / p >。
小开 
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

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

小开

这对我也很管用:

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

我的解决方案:

<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
  • media="print"只适用于Print。
  • 这适用于IE， Firefox和Chrome
小开

我用横向设置创建了一个空白的MS文档，然后在记事本中打开它。复制并粘贴以下内容到我的html页面

<style type="text/css" media="print">
@page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:4;}
div.Section1
{page:Section1;}
</style>






<div class="Section1"> put  text / images / other stuff  </div>

打印预览以横向大小显示页面。这似乎在IE和Chrome上工作得很好，没有在FF上测试。

小开

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

小开

仅仅旋转页面内容是不够的。下面是一个正确的CSS，它可以在大多数浏览器(Chrome, Firefox, IE9+)中工作。

首先将body margin设置为0，因为否则页边距将比你在打印对话框中设置的页边距大。还可以设置background color来可视化页面。

body {
margin: 0;
background: #CCCCCC;
}

margin， border和background用于页面可视化。

padding必须设置为所需的打印边距。在打印对话框中，必须设置相同的边距(本例中为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更安全。

我们不需要任何margin， border， padding， background在打印页面上，所以删除它们:

@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>
小开

你可以尝试以下方法:

@page {
size: auto
}
小开

我尝试了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>元素添加一个负旋转，给<body>元素添加一个等于abs值的正旋转。这节省了添加大量的CSS样式的身体，它的工作就像一个魅力:

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


body {
transform: rotate(90deg);
}
小开

我面临的问题可能和你一样。这里的每个人都使用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..如果你还没有使用它，我强烈建议你现在就开始使用。

小开
如果你正在使用React和MUI这样的库，在你的React应用中使用纯CSS不是一个好的实践。更好的方法是使用一个名为GlobalStyles的样式组件，我们可以从Material UI导入它。 代码如下所示，

import { GlobalStyles } from '@mui/material';
const printStyle = {
['@media print']: {
['@page']: {
size: 'landscape',
margin: '2px',
},
},
};

你可能不需要在@media print中使用@page，因为@page只用于打印。文档

页边距将消除浏览器在打印时生成的url。

我们可以在App容器中使用GlobalStyles。像这样

const App: React.FC = () => (
<>
<GlobalStyles styles={printStyle} />
<AppView />
</>
);
当我们调用windows.print()时，它将应用上面的CSS。 如果你在使用MUI之外的其他库，应该有一些组件或插件可以用于全局应用CSS

提交答案