從HTML打印景觀

287

在你的CSS，你可以設置@page屬性，如下圖所示。

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

的@page然而這size不是由答案突出的問題Is @Page { size:landscape} obsolete?的CSS 2.1 specification部分：

CSS 2.1不再指定大小屬性。當前工作草稿CSS3分頁媒體模塊確實指定它（但這不是標準或接受）。

如上所述，尺寸選項來自CSS 3 Draft Specification。理論上它可以設置爲頁面大小和方向，儘管在我的示例中大小被省略了。

支持與bug report begin filed in firefox混合，大多數瀏覽器不支持它。

它看起來可以在IE7中工作，但這是因爲IE7會記住用戶在打印預覽中選擇橫向或縱向（僅重新啓動瀏覽器）。

This article確實有一些建議的解決方法，使用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">

總之在一些瀏覽器它使用@頁大小選項然而，在許多瀏覽器沒有確定的方式，它取決於你的內容和環境是相對容易的。這可能是爲什麼Google文檔在選擇打印後創建PDF，然後允許用戶打開並打印該文檔。

來源

2009-09-08 08:50:50 John

+18

奇怪的是，它說'大小'可以是風景，當它實際上是一個'方向'。 – 2009-11-10 16:20:43

+1

`@page size`似乎無法適用於所有現代瀏覽器，只能使用Firefox。就我所見，Chrome和Opera都無視這一點。 – Justin808 2011-05-17 22:43:14

4

您還可以使用非標準IE-只CSS屬性writing-mode

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

來源

2008-09-26 09:28:55

+1

這會重定向頁面內容，但並不真正將頁面佈局更改爲橫向。即頁眉和頁腳仍然會被添加，就好像頁面是肖像一樣。 – 2009-07-28 03:13:48

8

您可能能夠使用CSS 2 @page rule它允許你設置'size' property to landscape。

來源

2008-09-26 09:33:47

7

嘗試添加這是你的CSS：

@page { 
    size: landscape; 
}

來源

2008-09-26 09:35:56 gizmo

+1

使用任何瀏覽器爲您工作嗎？使用IE8和Firefox3.5，它對打印預覽沒有任何影響。 – 2009-07-28 03:15:07

+0

不幸的是，打印預覽不會遵循所有的CSS屬性。但是這應該適用於所有當前的瀏覽器。 – gizmo 2009-07-28 05:30:14

+0

感謝您關注此事。它似乎也不適用於我的實際打印。我錯過了什麼嗎？我的測試文件如下：（我不得不截斷該段內容以適合在評論框）景觀測試頁

Lorem存有悲坐阿梅德，...

– 2009-07-28 23:06:07

1

我試圖解決這個問題一次，但我所有的研究導致我朝着ActiveX控件/插件。瀏覽器（無論如何3年前）都不允許更改任何打印設置（打印份數，紙張大小）。

我努力警告用戶，他們需要在瀏覽器打印對話框出現時選擇「橫向」。我還創建了一個「打印預覽」頁面，其效果比IE6好得多！我們的應用程序在某些報告中使用了非常寬泛的數據表，並且打印預覽在表格溢出紙張右邊緣時向用戶清楚（因爲IE6無法應付兩張紙上的打印）。

是的，即使現在人們仍在使用IE6。

來源

2009-11-10 16:24:28

0

<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。

來源

2010-06-18 09:24:57

11

援引CSS-Discuss Wiki

的@page規則已經範圍從CSS2砍倒CSS2.1。據報道，僅在Opera中實現了完整的 CSS2 @page規則（即使此時也是可用的）。我自己的測試表明， IE和Firefox不支持@page在全部。根據現已過時 CSS2規範第13.2.2節是可以覆蓋用戶的方向的設置，並在景觀（用於例如）力的打印，但相關的「大小」屬性已從CSS2下降。 1，一致的事實上沒有當前瀏覽器支持它。它已恢復爲 CSS3分頁媒體模塊，但注意，這只是一個工作草案（如2009年7月的）。

結論：忘記約@page爲目前。如果您覺得您的文檔需要在橫向模式下打印，那麼問問自己是否可以讓設計更加流暢。如果你真的不能（可能是因爲該文件包含了很多列數據表，用於爲例），您將需要告知用戶方向設置爲景觀，也許概述瞭如何在做最常見的瀏覽器。的當然，一些瀏覽器的打印適合與寬度（收縮以配合）功能（如Opera，火狐，IE7），但它不宜依賴於其這種設施，或具有用戶接通。

來源

2010-12-27 16:51:55

2

-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg); 
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

在Firefox 16.0.2沒有工作，但它是工作在Chrome

來源

2012-11-24 13:15:17 Satheesh

0

這也爲我工作：

@media print and (orientation:landscape) { … }

來源

2014-07-25 07:15:17

21

我的解決辦法：

<style type="text/css" media="print"> 
    @page { 
     size: landscape; 
    } 
    body { 
     writing-mode: tb-rl; 
    } 
</style>

這在IE,Firefox和Chrome

來源

2014-09-24 20:21:09

1

我創建了一個帶有橫向設置的空白MS文檔，然後在記事本中打開它。複製並粘貼到我的html頁面

<style type="text/css" media="print"> 
    @page Section1 
    {size:11 8.5in; 
    margin:.5in 13.6pt 0in 13.6pt; 
    mso-header-margin:.5in; 
    mso-footer-margin:.5in; 
    mso-paper-source:4;} 
div.Section1 
    {page:Section1;} 
</style> 



<div class="Section1"> put text/images/other stuff </div>

打印預覽顯示橫向大小的頁面。這似乎在IE和Chrome上運行良好，未在FF上進行測試。

來源

2015-01-05 20:06:39 Shankar

3

size屬性就是你所提到的。同時設置了方向和打印時，你的頁面的大小，你可以使用以下命令：

/* ISO Paper Size */ 
@page { 
    size: A4 landscape; 
} 

/* Size in mm */  
@page { 
    size: 100mm 200mm landscape; 
} 

/* Size in inches */  
@page { 
    size: 4in 6in landscape; 
}

這裏給@page documentation的鏈接。

來源

2017-02-20 12:20:57 robstarbuck

1

僅僅旋轉頁面內容是不夠的。這是一個適用於大多數瀏覽器（Chrome，Firefox，IE9 +）的正確CSS。

首先將主體margin設置爲0，否則頁邊距將大於您在打印對話框中設置的頁邊距。還設置background顏色以可視化頁面。

body { 
    margin: 0; 
    background: #CCCCCC; 
}

margin，border和background需要可視化的頁面。

padding必須設置爲所需的打印邊距。在打印對話框中，您必須設置相同的頁邊距（本例中爲10mm）。

div.portrait, div.landscape { 
    margin: 10px auto; 
    padding: 10mm; 
    border: solid 1px black; 
    overflow: hidden; 
    page-break-after: always; 
    background: white; 
}

A4頁面大小爲210mm x 297mm。您需要從大小中減去打印邊距。並設置頁面的內容大小：

div.portrait { 
    width: 190mm; 
    height: 276mm; 
} 
div.landscape { 
    width: 276mm; 
    height: 190mm; 
}

我用276毫米代替277毫米，因爲不同的瀏覽器頁面縮放一點點不同。因此，其中一些將在兩頁上打印277毫米高的內容。第二頁將是空的。使用276毫米更安全。

我們不需要任何margin，border，padding，background打印頁上，所以其刪除：

@media print { 
    body { 
    background: none; 
    -ms-zoom: 1.665; 
    } 
    div.portrait, div.landscape { 
    margin: 0; 
    padding: 0; 
    border: none; 
    background: none; 
    } 
    div.landscape { 
    transform: rotate(270deg) translate(-276mm, 0); 
    transform-origin: 0 0; 
    } 
}

注意轉型的起源是0 0！此外，景觀頁面的內容必須移動276毫米！

此外，如果您有縱向和橫向頁面的混合IE瀏覽器將縮小頁面。我們通過將-ms-zoom設置爲1.665來修復它。如果你將它設置爲1.6666或類似的東西，頁面內容的右邊框有時可能會被剪切。

如果您需要IE8或其他舊版瀏覽器支持，您可以使用-webkit-transform，-moz-transform，filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)。但對於現代化的瀏覽器來說，這不是必需的。

來源

2017-05-19 12:13:16 Denis

從HTML打印景觀

回答

相關問題