从HTML进行横向打印

时间:2020-03-06 14:46:25  来源:igfitidea点击:

我有一个HTML报告,由于列很多,因此需要横向打印。是否有一种方法可以执行此操作,而无需用户更改文档设置?

在浏览器中有哪些选项。

解决方案

我们还可以使用非标准的仅IE的CSS属性write-mode

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

我们也许可以使用CSS 2 @page规则,该规则允许我们将'size'属性设置为landscape。

尝试将其添加到CSS中:

@page {
  size: landscape;
}

在CSS中,我们可以设置@page属性,如下所示。

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

@page是CSS 2.1规范的一部分,但是问题" @Page {size:landscape}是否已过时?"的答案未突出显示此" size":

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草案规范。从理论上讲,可以将其设置为页面大小和方向,尽管在我的示例中省略了页面大小。

支持与在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选项相对容易,但是在许多浏览器中,没有确定的方法,这取决于内容和环境。
这也许就是为什么Google文档在选择打印后会创建PDF,然后允许用户打开并打印该PDF的原因。

我曾经尝试解决这个问题,但是我的所有研究都使我转向ActiveX控件/插件。没有任何技巧可以阻止浏览器(无论如何还是3年前)更改任何打印设置(份数,纸张尺寸)。

我尽力警告用户,当浏览器的打印对话框出现时,他们需要选择"横向"。我还创建了一个"打印预览"页面,该页面比IE6的效果要好得多!我们的应用程序在某些报告中具有非常宽的数据表,并且当表会从纸张的右边缘溢出时(因为IE6也无法处理两张纸),打印预览可以使用户清楚地知道该表。

是的,即使现在,人们仍在使用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标签内添加表格标签,并在最后关闭div标签。

该表仅以横向打印,所有其他页面仅以纵向模式打印。但是问题是,如果表大小大于页面宽度,那么我们可能会丢失一些行,有时还会丢失标题。当心。

谢谢,
纳文·梅塔帕利(Naveen Mettapally)。

引自CSS-Discuss Wiki

The @page rule has been cut down in
  scope from CSS2 to CSS2.1. The full
  CSS2 @page rule was reportedly
  implemented only in Opera (and buggily
  even then). My own testing shows that
  IE and Firefox don't support @page at
  all. According to the now-obsolescent
  CSS2 spec section 13.2.2 it is
  possible to override the user's
  setting of orientation and (for
  example) force printing in Landscape
  but the relevant "size" property has
  been dropped from CSS2.1, consistent
  with the fact that no current browser
  supports it. It has been reinstated in
  the CSS3 Paged Media module but note
  that this is only a Working Draft (as
  at July 2009).
  
  Conclusion: forget
  about @page for the present. If you
  feel your document needs to be printed
  in Landscape orientation, ask yourself
  if you can instead make your design
  more fluid. If you really can't
  (perhaps because the document contains
  data tables with many columns, for
  example), you will need to advise the
  user to set the orientation to
  Landscape and perhaps outline how to
  do it in the most common browsers. Of
  course, some browsers have a print
  fit-to-width (shrink-to-fit) feature
  (e.g. Opera, Firefox, IE7) but it's
  inadvisable to rely on users having
  this facility or having it switched
  on.