【问题标题】:Printing landscape or portrait in FireFox and IE 8在 FireFox 和 IE 8 中打印横向或纵向
【发布时间】:2013-05-24 07:25:32
【问题描述】:

目前我使用的是FireFox最新版本和IE8

为了改变打印方向,我使用了

@page {
  size: portrait;
}

在我的 css 文件中。 @page reference

虽然它声称两种浏览器都支持@page,但经过我的测试,除了Chrome之外它根本不起作用。我想知道如何在 FireFox / IE8 中以不同方向打印页面。

【问题讨论】:

标签: javascript jquery html css printing


【解决方案1】:

正如 MDN 参考所说:

您只能更改 文件。尝试更改任何其他 CSS 属性将是 忽略。

就为您提供实现您想要的标记而言,这超出了 SO 所允许的范围。此外,这可能需要一些工作,因为您希望两代后的 IE 版本尝试与当前一代 Firefox 一样好。

【讨论】:

  • 感谢您的帮助,为什么 Chrome 可以通过 CSS 指定打印方向?他们是否实现了某些功能?
【解决方案2】:

目前任何应用程序都不应该依赖此功能来跨浏览器工作,因为大多数浏览器仍在实施有关打印页面方向的 CSS3 标准。

对于谷歌浏览器它工作得很好:http://dev.activisual.net/test.html

最终,在打印过程中改变方向的决定取决于用户(即使它有效),因此您可以简单地让用户知道他们应该以横向或纵向打印页面,但通常不会永远不会阻止用户在桌面浏览器上打印时更改方向。

这是最近报告的 FF 错误报告: https://bugzilla.mozilla.org/show_bug.cgi?id=851441

您可以阅读此问题的已接受答案以供参考: Landscape printing from HTML

【讨论】:

  • 最终,虽然决定权在于用户,但网站建议用户可以覆盖的合理默认值并没有错,如果他们真的想要的话。你是对的,至少目前你根本不能依赖 CSS。一年后,Chrome 似乎仍然是唯一支持它的浏览器。在 Firefox 上,支持 @page 和方向的第一个错误是在 2001 年提交的(!) - bugzilla.mozilla.org/show_bug.cgi?id=115199,但仍未实现。我猜你最好不要屏住呼吸?
【解决方案3】:

这很奇怪

{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

最新版本的 Firefox 不适合你,因为我自己测试过并且工作正常。

如果您找不到任何东西,请查看here,尽管这不是完全正确的纵向模式(用于打印),但您可能会得到一些想法。

最后,如果你感到绝望并且你真的需要找到一种方法来做到这一点,你可以随时截取网页截图,例如 html2canvas 旋转图像,然后打印图像而不是网页.. . 不是一个理想的解决方案,但这样可以绕过浏览器。

【讨论】:

    【解决方案4】:

    我在制作一个简单的表格时遇到了这个问题。

    Chrome 似乎确实是限制用户控制打印过程的最佳浏览器。不过还是有限制的,火狐/其他浏览器不支持@page。

    我的解决方案是在样式表中添加@media 打印,以“鼓励”用户以纵向打印页面。 @page 仅适用于 chrome。显示:无;在页眉、导航和页脚上去掉不需要的浏览器添加(这只适用于 chrome 和 firefox,即你仍然必须选择没有标题)我有一个边框:0;在输入字段上,因为它是用于表单... 最后我在容器 div 上放了一个宽度和高度,类似于标准 8.5 x 11 纸的大小。所以它会很好地适合页面。

    @media print{
        @page {size: auto; margin: auto;}
        header nav, footer {display: none;}
        input {border: 0px;}
        #container  {width:9.1in; height:10in;}
    
    } 
    

    归根结底,网页打印仍然非常依赖于浏览器/用户,对此确实无能为力。制作@media print 会有所帮助,但真正让页面完全按照您的需要打印的唯一方法是生成用户可以导出的页面的 pdf 版本。

    【讨论】:

      【解决方案5】:

      页面打印布局默认为纵向,要更改为横向,请尝试以下操作。

      从 19.0 版本开始支持以下 css 代码,试试吧,它应该可以解决您的问题: 对于 IE8,您应该在 html 中使用 HTML5 指令

      <!doctype html>
      

      CSS代码:

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

      火狐:https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart

      IEhttp://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx

      【讨论】:

        【解决方案6】:

        只需转到文件,单击页面设置并更改方向。这对我有用

        【讨论】:

          猜你喜欢
          • 2014-07-06
          • 1970-01-01
          • 2012-06-23
          • 1970-01-01
          • 1970-01-01
          • 2016-01-13
          • 1970-01-01
          • 2014-02-23
          • 2012-03-29
          相关资源
          最近更新 更多