jQuery 在 FireFox 和 IE 8 中打印横向或纵向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16807044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Printing landscape or portrait in FireFox and IE 8
提问by user1871516
Currently I am using FireFox latest version and IE8
目前我使用的是 FireFox 最新版本和 IE8
To change the orientation of printing , I used
要更改打印方向，我使用
@page {
size: portrait;
}
in my css file. @page reference
在我的 css 文件中。 @page 参考
Although it claims that the @page is supported in both browsers , after my testing it is not working at all besides Chrome. I would like to know how to print the page in different orientation in FireFox / IE8.
虽然它声称 @page 在两种浏览器中都受支持，但经过我的测试，它除了 Chrome 之外根本无法工作。我想知道如何在 FireFox / IE8 中以不同方向打印页面。
回答by jacmkno
No application should depend on this feature to work cross browser right now because the CSS3 standard on page orientation for printing is still under implementation in most browsers.
现在任何应用程序都不应依赖此功能来跨浏览器工作，因为大多数浏览器仍在实施有关打印页面方向的 CSS3 标准。
For Google Chrome it works just fine: http://dev.activisual.net/test.html
对于谷歌浏览器它工作得很好：http: //dev.activisual.net/test.html
Ultimately the decision of changing the orientation relays on the user during the printing process (even if it works), so you could simply let the users know that they should print the page in landscape or portrait, but in general there won′t ever by a way to prevent the users from changing the orientation while printing on desktop browsers.
最终改变方向的决定在打印过程中由用户决定（即使它有效），所以你可以简单地让用户知道他们应该以横向或纵向打印页面，但通常不会有一种防止用户在桌面浏览器上打印时更改方向的方法。
Here is a bug report for FF reported very recently: https://bugzilla.mozilla.org/show_bug.cgi?id=851441
这是最近报告的 FF 错误报告：https: //bugzilla.mozilla.org/show_bug.cgi?id=851441
You can read the accepted answer on this question for reference: Landscape printing from HTML
您可以阅读有关此问题的已接受答案以供参考： Landscape Printing from HTML
回答by Rob
As the MDN reference says:
正如 MDN 参考所说：
You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.
您只能更改文档的边距、孤行、寡行和分页符。更改任何其他 CSS 属性的尝试将被忽略。
As far as supplying you with markup that achieves what you want, that would be outside the bounds of what's allowed on SO. In addition, it could be a bit of work since you are wanting a two generation back version of IE to attempt to perform as well as a current generation Firefox.
至于为您提供实现您想要的标记的标记，那将超出 SO 允许的范围。此外，这可能需要一些工作，因为您希望 IE 的两代回溯版本尝试与当前一代的 Firefox 一样执行。
回答by Mehdi Karamosly
Page printing layout is portrait by default, to change to landscape and see the difference try the below.
页面打印布局默认为纵向，要更改为横向并查看差异，请尝试以下操作。
The the below css code is supported since version 19.0 , try it, it should solve your problem: For IE8 you should use HTML5 directive in your html
从 19.0 版开始支持以下 css 代码，尝试一下，它应该可以解决您的问题：对于 IE8，您应该在 html 中使用 HTML5 指令
<!doctype html>
Css code :
CSS代码：
@media print{@page {size: landscape}}
Firefox: https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart
火狐：https: //developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart
IE http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx
IE http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx
回答by Thanos
It's weird that this
这很奇怪
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
doesn't work for you for the latest version of Firefox as i tested it myself and works fine.
不适用于最新版本的 Firefox，因为我自己测试了它并且工作正常。
If you can't find anything have a look hereeven though this isn't exactly the right portrait mode (for printing) but you might get some ideas.
如果您找不到任何东西，请查看这里，即使这不是正确的纵向模式（用于打印），但您可能会得到一些想法。
Lastly if you get desperate and u really need to find a way to do this, you can always take a screenshot of the web page with for example html2canvasrotate the image and then print the image instead of the webpage... Not an ideal solution but this way you bypass the browser.
最后，如果你感到绝望并且你真的需要找到一种方法来做到这一点，你总是可以使用例如html2canvas旋转图像然后打印图像而不是网页...不是一个理想的解决方案但是这样你就绕过了浏览器。
回答by Joe_Maker
I ran into this issue a little wile ago while making a simple form.
之前我在制作一个简单的表格时遇到了这个问题。
Chrome does seem to be the best browser for limiting a users control over the printing process. However it is still limited, and Firefox/other browsers don't support @page.
Chrome 似乎是限制用户控制打印过程的最佳浏览器。但是它仍然有限，Firefox/其他浏览器不支持@page。
My solution was to add a @media print to the style sheet to "encourage" the user to print the page in portrait. The @page is just for chrome. display: none; on the header, nav, and footer gets rid of the unwanted browser additions (this only works in chrome and firefox, in ie you still have to select no headers) I have a border:0; on input fields, because it was for a form... Finally I put a width and height on the container div, similar to the size of a standard 8.5 x 11 piece of paper. So it would fit the page nicely.
我的解决方案是在样式表中添加 @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;}
}
Ultimately webpage printing is still very browser/user dependent, and there really isn't much that can be done about it. Making @media print helps, but really the only way to get the page to print exactly as you want would be to generate a pdf version of the page that the user could export.
最终网页打印仍然非常依赖于浏览器/用户，并且真的没有太多可以做的事情。使@media 打印有帮助，但真正让页面完全按照您的意愿打印的唯一方法是生成用户可以导出的页面的 pdf 版本。
回答by TCB
Just go to file, click on page setup and change the orientation. This works for me
只需转到文件，单击页面设置并更改方向。这对我有用
