In phong cảnh từ HTML

Tôi có một báo cáo HTML, cần được in phong cảnh vì có nhiều cột. Có cách nào để làm điều này mà không cần người dùng phải thay đổi cài đặt tài liệu không?

Và các tùy chọn giữa các trình duyệt là gì.

Trong CSS của bạn, bạn có thể đặt thuộc tính @page như hiển thị bên dưới.

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

@Page là một phần của đặc tả CSS 2.1 tuy nhiên điều này sizekhông được đánh dấu bằng câu trả lời cho câu hỏi Có phải @Page {size: cảnh} đã lỗi thời? :

CSS 2.1 không còn chỉ định thuộc tính kích thước. Dự thảo làm việc hiện tại cho mô-đun Paged Media CSS3 chỉ định nó (nhưng điều này không chuẩn hoặc được chấp nhận).

Như đã nêu, tùy chọn kích thước đến từ Đặc tả Dự thảo CSS 3 . Về lý thuyết, nó có thể được đặt thành cả kích thước và hướng trang mặc dù trong mẫu của tôi kích thước bị bỏ qua.

Sự hỗ trợ rất hỗn hợp với một báo cáo lỗi bắt đầu được gửi trong firefox , hầu hết các trình duyệt không hỗ trợ nó.

Nó có vẻ hoạt động trong IE7 nhưng điều này là do IE7 sẽ ghi nhớ lựa chọn cuối cùng của người dùng về phong cảnh hoặc chân dung trong bản xem trước in (chỉ trình duyệt được khởi động lại).

Bài viết này có một số công việc được đề xuất xung quanh bằng cách sử dụng JavaScript hoặc ActiveX gửi khóa đến trình duyệt của người dùng mặc dù chúng không lý tưởng và dựa vào việc thay đổi cài đặt bảo mật của trình duyệt.

Thay phiên, bạn có thể xoay nội dung thay vì hướng trang. Điều này có thể được thực hiện bằng cách tạo một kiểu và áp dụng nó cho phần thân bao gồm hai dòng này nhưng điều này cũng có những nhược điểm tạo ra nhiều vấn đề căn chỉnh và bố cục.

<style type="text/css" media="print">
    .page
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

Sự thay thế cuối cùng tôi đã tìm thấy là tạo một phiên bản nằm ngang trong PDF. Bạn có thể trỏ đến như vậy khi người dùng chọn in nó sẽ in PDF. Tuy nhiên tôi không thể có được điều này để tự động in công việc trong IE7.

<link media="print" rel="Alternate" href="print.pdf">

Tóm lại, trong một số trình duyệt, tính tương đối dễ dàng khi sử dụng tùy chọn kích thước @page tuy nhiên trong nhiều trình duyệt không có cách nào chắc chắn và nó sẽ phụ thuộc vào nội dung và môi trường của bạn. Đây có thể là lý do tại sao Tài liệu Google tạo tệp PDF khi in được chọn và sau đó cho phép người dùng mở và in.

Giải pháp của tôi:

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

Điều này hoạt động trong IE, FirefoxvàChrome

Chỉ xoay nội dung trang là không đủ. Đây là một CSS đúng hoạt động trong hầu hết các trình duyệt (Chrome, Firefox, IE9 +).

Đầu tiên đặt phần thân marginthành 0, vì nếu không thì lề trang sẽ lớn hơn phần bạn đặt trong hộp thoại in. Cũng đặt backgroundmàu để trực quan hóa các trang.

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

margin, borderVà backgroundđược yêu cầu để hình dung các trang.

paddingphải được đặt thành lề in yêu cầu. Trong hộp thoại in, bạn phải đặt cùng một lề (trong ví dụ này là 10 mm).

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

Kích thước của trang A4 là 210mm x 297mm. Bạn cần phải trừ lề in từ kích thước. Và đặt kích thước của nội dung trang:

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

Tôi sử dụng 276mm thay vì 277mm, vì các trình duyệt khác nhau chia tỷ lệ các trang khác nhau một chút. Vì vậy, một số trong số họ sẽ in nội dung chiều cao 277mm trên hai trang. Trang thứ hai sẽ trống. An toàn hơn khi sử dụng 276mm.

Chúng ta không cần bất kỳ margin, border, padding, backgroundtrên trang in, vì vậy loại bỏ chúng:

@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;
  }
}

Lưu ý rằng nguồn gốc của sự biến đổi là 0 0! Ngoài ra, nội dung của các trang phong cảnh phải được di chuyển xuống 276mm!

Ngoài ra, nếu bạn có sự kết hợp giữa các trang dọc và lanscape, IE sẽ thu nhỏ các trang. Chúng tôi sửa nó bằng cách đặt -ms-zoomthành 1.665. Nếu bạn sẽ đặt nó thành 1.6666 hoặc đại loại như thế này, đường viền bên phải của nội dung trang đôi khi có thể bị cắt.

Nếu bạn cần IE8- hoặc các trình duyệt cũ khác hỗ trợ bạn có thể sử dụng -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). Nhưng đối với các trình duyệt đủ hiện đại thì không bắt buộc.

Đây là một trang thử nghiệm:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      ...Copy all styles here...
    </style>
  </head>
  <body>
    <div class="portrait">A portrait page</div>
    <div class="landscape">A landscape page</div>
  </body>
</html>

Trích dẫn từ CSS-Thảo luận Wiki

Quy tắc @page đã được cắt giảm trong phạm vi từ CSS2 đến CSS2.1. Quy tắc @page CSS2 đầy đủ được báo cáo chỉ được triển khai trong Opera (và ngay cả khi đó). Thử nghiệm của riêng tôi cho thấy IE và Firefox hoàn toàn không hỗ trợ @page. Theo phần đặc tả CSS2 hiện tại, phần 13.2.2, có thể ghi đè cài đặt hướng của người dùng và (ví dụ) bắt buộc in trong Cảnh nhưng thuộc tính "kích thước" có liên quan đã bị loại bỏ khỏi CSS2.1, phù hợp với thực tế rằng không có trình duyệt hiện tại hỗ trợ nó. Nó đã được khôi phục trong mô-đun Paged Media của CSS3 nhưng lưu ý rằng đây chỉ là Bản nháp hoạt động (vào tháng 7 năm 2009).

Kết luận: quên về @page cho hiện tại. Nếu bạn cảm thấy tài liệu của mình cần được in theo hướng Cảnh, hãy tự hỏi liệu thay vào đó bạn có thể làm cho thiết kế của mình trôi chảy hơn không. Nếu bạn thực sự không thể (có lẽ vì tài liệu chứa các bảng dữ liệu có nhiều cột chẳng hạn), bạn sẽ cần khuyên người dùng đặt hướng thành Cảnh và có thể phác thảo cách thực hiện trong các trình duyệt phổ biến nhất. Tất nhiên, một số trình duyệt có tính năng in vừa với chiều rộng (thu nhỏ để vừa) (ví dụ Opera, Firefox, IE7) nhưng không thể tin tưởng vào người dùng có tiện ích này hoặc bật nó.

Hãy thử thêm CSS này của bạn:

@page {
  size: landscape;
}

Tài sizesản là những gì bạn sau khi được đề cập. Để đặt cả hướng và kích thước của trang của bạn khi in, bạn có thể sử dụng như sau:

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

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

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

Đây là một liên kết đến tài liệu @page .

Bạn có thể sử dụng quy tắc @page CSS 2 cho phép bạn đặt thuộc tính 'kích thước' thành ngang .

Bạn cũng có thể sử dụng chế độ ghi thuộc tính css chỉ dành cho IE

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

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

không hoạt động trong Firefox 16.0.2 nhưng nó hoạt động trong Chrome

Tôi đã tạo một Tài liệu MS trống với cài đặt Phong cảnh và sau đó mở nó trong notepad. Sao chép và dán đoạn sau vào trang html của tôi

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

Bản xem trước in cho thấy các trang ở kích thước ngang. Điều này dường như đang hoạt động tốt trên IE và Chrome, không được thử nghiệm trên FF.

Tôi đã cố gắng giải quyết vấn đề này một lần, nhưng tất cả các nghiên cứu của tôi đã đưa tôi đến các điều khiển / trình cắm ActiveX. Không có mẹo nào mà các trình duyệt (3 năm trước dù thế nào đi nữa) được phép thay đổi bất kỳ cài đặt in nào (số lượng bản sao, khổ giấy).

Tôi cố gắng hết sức cảnh báo người dùng rằng họ cần chọn "phong cảnh" khi hộp thoại in của trình duyệt xuất hiện. Tôi cũng đã tạo một trang "xem trước bản in", hoạt động tốt hơn nhiều so với IE6 đã làm! Ứng dụng của chúng tôi có các bảng dữ liệu rất rộng trong một số báo cáo và bản xem trước in cho người dùng thấy rõ khi bảng sẽ tràn ra cạnh phải của tờ giấy (vì IE6 cũng không thể đối phó với việc in trên 2 tờ).

Và vâng, mọi người vẫn đang sử dụng IE6 ngay cả bây giờ.

<style type="text/css" media="print">
.landscape { 
    width: 100%; 
    height: 100%; 
    margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); 
} 
</style>

Nếu bạn muốn kiểu này được áp dụng cho một bảng thì hãy tạo một thẻ div với lớp kiểu này và thêm thẻ bảng trong thẻ div này và đóng thẻ div ở cuối.

Bảng này sẽ chỉ in theo chiều ngang và tất cả các trang khác sẽ chỉ in ở chế độ dọc. Nhưng vấn đề là nếu kích thước bảng lớn hơn chiều rộng trang thì chúng ta có thể mất một số hàng và đôi khi các tiêu đề cũng bị bỏ qua. Hãy cẩn thận.

Chúc bạn ngày mới tốt lành.

Cảm ơn bạn, Naveen Mettapally.

Tôi đã thử câu trả lời của Denis và gặp một số vấn đề (các trang chân dung không được in đúng sau khi đi sau các trang ngang), vì vậy đây là giải pháp của tôi:

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>

Điều này cũng làm việc cho tôi:

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

Nếu bạn muốn xem phong cảnh trên màn hình trước khi in, cũng như in, thì trong css của bạn, bạn có thể đặt chiều rộng thành 900px và chiều cao thành 612px.

OP không đề cập đến kích thước A4. Tôi giả sử đó là kích thước chữ trong số của tôi ở trên.

Bạn có thể thử như sau:

@page {
    size: auto
}