从 HTML 横向打印 [英] Landscape printing from HTML

问题描述

我有一个 HTML 报告，由于列很多，需要横向打印.有没有办法做到这一点，而无需用户更改文档设置?

I have a HTML report, which needs to be printed landscape because of the many columns. It there a way to do this, without the user having to change the document settings?

浏览器之间有哪些选项.

And what are the options amongst browsers.

推荐答案

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

In your CSS you can set the @page property as shown below.

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

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

The @page is part of CSS 2.1 specification however this size is not as highlighted by the answer to the question Is @Page { size:landscape} obsolete?:

CSS 2.1 不再指定 size 属性.目前的工作CSS3 Paged Media 模块的草案确实指定了它(但这不是标准或接受).

CSS 2.1 no longer specifies the size attribute. The current working draft for CSS3 Paged Media module does specify it (but this is not standard or accepted).

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

As stated the size option comes from the CSS 3 Draft Specification. In theory it can be set to both a page size and orientation although in my sample the size is omitted.

支持与错误报告开始在 firefox 中提交，大多数浏览器都非常复杂不支持.

The support is very mixed with a bug report begin filed in firefox, most browsers do not support it.

它可能在 IE7 中工作，但这是因为 IE7 会记住用户在打印预览中最后选择的横向或纵向(仅重新启动浏览器).

It may seem to work in IE7 but this is because IE7 will remember the users last selection of landscape or portrait in print preview (only the browser is re-started).

这篇文章 确实有一些使用 JavaScript 或 ActiveX 向用户浏览器发送密钥的建议解决方法，尽管它们并不理想并且依赖于更改浏览器的安全设置.

This article does have some suggested work arounds using JavaScript or ActiveX that send keys to the users browser although it they are not ideal and rely on changing the browsers security settings.

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

Alternately you could rotate the content rather than the page orientation. This can be done by creating a style and applying it to the body that includes these two lines but this also has draw backs creating many alignment and layout issues.

<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 中自动打印.

The final alternative I have found is to create a landscape version in a PDF. You can point to so when the user selects print it prints the PDF. However I could not get this to auto print work in IE7.

<link media="print" rel="Alternate" href="print.pdf">

总而言之，在某些浏览器中使用@page size 选项相对容易，但是在许多浏览器中没有确定的方法，这取决于您的内容和环境.这可能是为什么 Google 文档在选择打印时会创建一个 PDF，然后允许用户打开和打印它的原因.

In conclusion in some browsers it is relativity easy using the @page size option however in many browsers there is no sure way and it would depend on your content and environment. This maybe why Google Documents creates a PDF when print is selected and then allows the user to open and print that.

这篇关于从 HTML 横向打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！