从HTML进行横向打印

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

浏览器中有哪些选项。

当前回答

我尝试了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>

2019-11-27 13:32:34

其他回答

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

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

2008-09-26 09:28:55

你可以尝试以下方法:

@page {
    size: auto
}

2019-11-06 10:03:49

你可以使用css2 @page规则，它允许你将“size”属性设置为横向。

2008-09-26 09:33:47

引用自css - discussion 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.

2010-12-27 16:51:55

这是我想到的-添加一个负旋转<html>元素和一个正旋转等于abs值<身体>。这节省了添加大量的CSS样式的身体，它的工作就像一个魅力:

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

body { 
  transform: rotate(90deg);
}

2021-05-02 19:23:28

从HTML进行横向打印

推荐文章

最新文章

标签