Làm cách nào để tạo Trang HTML trong (các) trang khổ giấy A4?

Có thể làm cho một trang HTML hoạt động, ví dụ như một trang có kích thước A4 trong MS Word không?

Về cơ bản, tôi muốn có thể hiển thị trang HTML trong trình duyệt và phác thảo nội dung theo kích thước của trang kích thước A4.

Để đơn giản, tôi giả định rằng trang HTML sẽ chỉ chứa văn bản (không có hình ảnh, v.v.) và sẽ không có <br>thẻ chẳng hạn.

Ngoài ra, khi trang HTML được in, nó sẽ xuất hiện dưới dạng các trang giấy có kích thước A4.

Trước đây, vào tháng 11 năm 2005, AlistApart.com đã xuất bản một bài viết về cách họ xuất bản một cuốn sách không sử dụng gì ngoài HTML và CSS. Xem: http://alistapart.com/article/boom

Đây là một đoạn trích của bài viết đó:

CSS2 có một khái niệm về phương tiện phân trang (nghĩ tờ giấy), trái ngược với phương tiện liên tục (nghĩ thanh cuộn). Biểu định kiểu có thể đặt kích thước của trang và lề của chúng. Các mẫu trang có thể được đặt tên và các thành phần có thể cho biết trang nào chúng muốn được in. Ngoài ra, các yếu tố trong tài liệu nguồn có thể buộc ngắt trang. Đây là đoạn trích từ biểu định kiểu chúng tôi đã sử dụng:

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

Có một nhà xuất bản có trụ sở tại Hoa Kỳ, chúng tôi đã được cung cấp kích thước trang tính bằng inch. Chúng tôi, là người châu Âu, tiếp tục với các phép đo hệ mét. CSS chấp nhận cả hai.

Sau khi thiết lập kích thước trang và lề, chúng tôi cần đảm bảo có các ngắt trang ở đúng nơi. Đoạn trích sau đây cho thấy cách ngắt trang được tạo sau các chương và phụ lục:

div.chapter, div.appendix {
    page-break-after: always;
}

Ngoài ra, chúng tôi đã sử dụng CSS2 để khai báo các trang được đặt tên:

div.titlepage {
  page: blank;
}

Nghĩa là, trang tiêu đề sẽ được in trên các trang có tên trống. CSS2 đã mô tả khái niệm về các trang được đặt tên, nhưng giá trị của chúng chỉ trở nên rõ ràng khi các tiêu đề và chân trang có sẵn.

Dù sao…

Vì bạn muốn in A4, tất nhiên bạn sẽ cần các kích thước khác nhau:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

Bài viết đi sâu vào những thứ như thiết lập ngắt trang, v.v. vì vậy bạn có thể muốn đọc nó hoàn toàn.

Trong trường hợp của bạn, mẹo là tạo CSS in trước. Hầu hết các trình duyệt hiện đại (> 2005) đều hỗ trợ thu phóng và sẽ có thể hiển thị trang web dựa trên CSS in.

Bây giờ, bạn sẽ muốn làm cho màn hình web trông khác đi một chút và điều chỉnh toàn bộ thiết kế để phù hợp với hầu hết các trình duyệt (bao gồm cả các trình duyệt cũ, trước năm 2005). Vì vậy, bạn sẽ phải tạo tệp CSS web hoặc ghi đè một số phần của CSS in của bạn. Khi tạo CSS để hiển thị trên web, hãy nhớ rằng một trình duyệt có thể có kích thước BẤT K ((nghĩ: điện thoại di động có thể lên đến TV TV màn hình lớn). Ý nghĩa: đối với CSS web, chiều rộng trang và chiều rộng hình ảnh của bạn được đặt tốt nhất bằng cách sử dụng độ rộng biến (%) để hỗ trợ càng nhiều thiết bị hiển thị và ứng dụng duyệt web càng tốt.

EDIT (26-02-2015)

Hôm nay, tôi tình cờ tìm thấy một bài báo khác, gần đây hơn tại SmashingMagazine , người cũng đã thiết kế để in bằng HTML và CSS, chỉ trong trường hợp bạn có thể sử dụng một hướng dẫn khác.

EDIT (30-10-2018)

Tôi đã nhận thấy rằng sizeCSS3 không hợp lệ, điều này thực sự chính xác - Tôi chỉ lặp lại mã được trích dẫn trong bài viết (như đã lưu ý) là CSS2 cũ tốt (có ý nghĩa khi bạn nhìn vào năm của bài viết và Câu trả lời này đã được công bố lần đầu tiên). Dù sao, đây là mã CSS3 hợp lệ để thuận tiện cho việc sao chép và dán của bạn:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

Trong trường hợp bạn nghĩ rằng bạn thực sự cần pixel ( bạn thực sự nên tránh sử dụng pixel ), bạn sẽ phải cẩn thận chọn DPI chính xác để in:

• 72 dpi (web) = 595 X 842 pixel
• 300 dpi (in) = 2480 X 3508 pixel
• 600 dpi (bản in chất lượng cao) = 4960 X 7016 pixel

Tuy nhiên, tôi sẽ tránh rắc rối và chỉ cần sử dụng cm(centimet) hoặc mm(milimet) để định cỡ vì điều đó tránh việc hiển thị các trục trặc có thể phát sinh tùy thuộc vào ứng dụng khách nào bạn sử dụng.

Sẽ khá dễ dàng để buộc trình duyệt web hiển thị trang có cùng kích thước pixel như A4. Tuy nhiên, có thể có một vài quirks khi mọi thứ được kết xuất.

Giả sử màn hình của bạn hiển thị 72 dpi, bạn có thể thêm một cái gì đó như thế này:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>

Kích thước A4 là 210x297mm

Vì vậy, bạn có thể đặt trang HTML để phù hợp với các kích thước đó bằng CSS:

html,body{
    height:297mm;
    width:210mm;
}

Tạo phần với mỗi trang và sử dụng mã dưới đây để điều chỉnh lề, chiều cao và chiều rộng.

Nếu bạn đang in khổ A4.

Sau đó, người dùng

Size : 8.27in and 11.69 inches

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}

div.Section1 {
    page: Section1;
} 

sau đó tạo một div với tất cả nội dung của bạn trong đó.

<div class="Section1"> 
    type your content here... 
</div>

hoặc là

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}

Tôi đã sử dụng HTML để tạo các báo cáo in ra chính xác ở kích thước thật trên giấy thật.

Nếu bạn cẩn thận sử dụng mm làm đơn vị của mình trong tệp CSS, bạn sẽ ổn, ít nhất là cho các trang đơn lẻ. Mọi người có thể làm phiền bạn bằng cách thay đổi zoom in trong trình duyệt của họ.

Tôi dường như nhớ mọi thứ tôi đang làm là một trang duy nhất, vì vậy tôi không phải lo lắng về việc phân trang - điều đó có thể khó hơn nhiều.

Tôi đã thấy giải pháp này sau khi tìm kiếm tại google, tìm kiếm "mẫu trang CSS A4" (codepen.io). Nó hiển thị một khu vực có kích thước A4 (A3, A5, cũng là chân dung) trong trình duyệt, sử dụng thẻ <page>. Bên trong thẻ này, nội dung được hiển thị, nhưng vị trí tuyệt đối vẫn liên quan đến khu vực trình duyệt.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

Điều này làm việc cho tôi mà không có bất kỳ thư viện css / js nào khác được đưa vào. Hoạt động cho các trình duyệt hiện tại (IE, FF, Chrome).

<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

Trong bình thường của bạn style.css:

table.tableclassname {
  width: 400px;
}

Trong của bạn print.css:

table.tableclassname {
  width: 16 cm;
}

PPI và DPI hoàn toàn không có sự khác biệt về cách tài liệu sẽ in ra một trình duyệt. Máy in không có thông tin về độ cao chấm màn hình hoặc DPI của hình ảnh, v.v. nếu bạn đang in hình ảnh, chúng sẽ in với kích thước tương tự như cách chúng được hiển thị trên màn hình. bộ xử lý in của trình duyệt sẽ tăng DPI của hình ảnh từ mức thấp như 72dpi lên bất kỳ DPI nào trong phần còn lại của tài liệu. giả sử hình ảnh hiển thị rộng nửa trang, sau đó rộng khoảng 4 "vật lý. Chiều rộng pixel của hình ảnh sẽ xấp xỉ 300px để hiển thị chính xác trong trình duyệt. Vào thời điểm in ở mức 300DPI danh nghĩa, bộ xử lý đã thêm pixel và hình ảnh sẽ tăng lên khoảng 1200px, ở mức 300 DPI là 4 ".

khi nói đến các yếu tố dựa trên vectơ hoặc không pixel như văn bản, máy in sẽ chọn DPI của chính nó từ trình điều khiển không liên quan đến độ cao chấm màn hình hoặc chiều rộng trình duyệt, v.v. nếu trình duyệt rộng 3000px, bộ xử lý in sẽ bao bọc văn bản phù hợp.

Đây là điều gây khó khăn cho việc tạo màn hình in: mỗi trình duyệt và máy in sẽ diễn giải kích thước văn bản (pt, em, px) và khoảng cách theo cách riêng của nó. tùy thuộc vào máy in, trình duyệt và thậm chí cả hệ điều hành bạn sử dụng, bạn sẽ nhận được số lượng dòng và ký tự khác nhau trên mỗi trang. Vì vậy, ngay cả khi bạn kiểm tra trên máy tính bằng trình duyệt và máy in của mình và nhận ra rằng bạn có thể hiển thị văn bản trong hộp ở độ phân giải 640x900px và bản in hoàn hảo của nó, người tiếp theo cố gắng in sẽ có thể in nó theo cách khác. thực sự không có cách nào để buộc mỗi máy in và trình duyệt phải giống hệt nhau mỗi lần.

quên pixel và moreso quên DPI, điều duy nhất bạn có thể sử dụng pixel là đặt chiều rộng bảng mô phỏng chiều rộng của vùng có thể in trên máy in của bạn. trong trường hợp đó tôi thấy rằng chiều rộng 640px là gần.

Tìm kiếm vấn đề tương tự tôi đã tìm thấy điều này - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 là định dạng tài liệu, vì hình ảnh màn hình sẽ phụ thuộc vào độ phân giải hình ảnh, ví dụ: tài liệu A4 được thay đổi kích thước thành:

• 72 dpi (web) = 595 X 842 pixel
• 300 dpi (in) = 2480 X 3508 pixel (Đây là "A4" như tôi biết, tức là "210mm X 297mm @ 300 dpi")
• 600 dpi (in) = 4960 X 7016 pixel

Tôi biết rằng chủ đề này khá cũ nhưng tôi muốn chia sẻ kinh nghiệm của mình về chủ đề đó. Trên thực tế, tôi đã tìm kiếm một mô-đun có thể giúp tôi với các báo cáo hàng ngày của mình. Tôi đang viết một số tài liệu và một số báo cáo bằng HTML + CSS (thay vì Word, latex, OO, ...). Đối tượng sẽ là in chúng trên giấy A4 để chia sẻ với bạn bè, ... Thay vì tìm kiếm, tôi quyết định có một phiên mã hóa nhỏ vui để thực hiện một lib đơn giản có thể xử lý "trang", số trang, tóm tắt, tiêu đề , footer, .... Cuối cùng, tôi đã làm nó trong ~ ~ 2h và tôi biết đó không phải là công cụ tốt nhất từ ​​trước đến nay nhưng nó gần như ổn với mục đích của tôi. Bạn có thể xem dự án này trên repo của tôi và đừng ngần ngại chia sẻ ý tưởng của bạn. Nó có thể không phải là những gì bạn đang tìm kiếm ở 100% nhưng tôi nghĩ rằng mô-đun này có thể giúp bạn.

Về cơ bản tôi tạo một trang có thân "chiều rộng: 200mm;" và thùng chứa chiều cao: 290mm (nhỏ hơn A4). Sau đó, tôi đã sử dụng trang-break-after: always; vì vậy tùy chọn "in" của trình duyệt sẽ biết khi nào nên chia trang.

repo: https://github.com/kursion/jsprint

Về mặt kỹ thuật, bạn có thể, nhưng sẽ mất rất nhiều công sức để khiến tất cả các trình duyệt in ra trang chính xác như được hiển thị trên màn hình. Ngoài ra, hầu hết các trình duyệt buộc URL, ngày in và đánh số trang trên bản in ra, điều này không phải lúc nào cũng mong muốn. Điều này không thể được thay đổi hoặc vô hiệu hóa.

Thay vào đó, tôi khuyên bạn nên tạo một tệp PDF dựa trên nội dung trên màn hình và phân phát PDF để tải xuống và / hoặc in. Mặc dù hầu hết các thư viện PDF có sẵn đều được trả tiền, nhưng có một vài lựa chọn thay thế miễn phí có sẵn để tạo các tệp PDF cơ bản.

Tôi đã sử dụng 680px trong các báo cáo thương mại để in trên các trang A4 từ năm 1998. 700px không thể phù hợp chính xác phụ thuộc vào kích thước lề. Các trình duyệt hiện đại có thể thu nhỏ trang để vừa trang trên máy in, nhưng nếu bạn sử dụng 680 pixel, bạn sẽ in chính xác trong hầu hết mọi trình duyệt.

Đó là HTML cho bạn Chạy đoạn mã và xem kết quả:

window.print();

<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

Mã thông báo:

https://jsfiddle.net/ajofmm7r/

Nhiều cách để làm:

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}

Hoàn toàn có thể đặt bố cục của bạn theo tỷ lệ của trang a4. Bạn sẽ chỉ phải đặt chiều rộng và chiều cao phù hợp (có thể kiểm tra window.innerHeightvà window.innerWidthmặc dù tôi không chắc điều đó có đáng tin hay không).

Phần khó khăn là in A4. Javascript chẳng hạn chỉ hỗ trợ in trang một cách thô sơ với window.printphương thức. Như @Prutswonder đã đề xuất tạo một PDF từ trang web có lẽ là cách tinh vi nhất để thực hiện việc này (ngoài việc cung cấp tài liệu PDF ở nơi đầu tiên). Tuy nhiên, điều này không tầm thường như người ta nghĩ. Đây là một liên kết có mô tả về tất cả các lớp Java nguồn mở để tạo các tệp PDF từ HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

Rõ ràng một khi bạn đã tạo một tệp PDF với tỷ lệ in A4, nó sẽ dẫn đến một bản in A4 sạch của trang của bạn. Liệu đó có đáng để đầu tư thời gian hay không là một câu hỏi khác.