如何在 A4 紙尺寸頁面中製作 HTML 頁面？

問題描述

是否可以使 HTML 頁面行為，例如像 MS Word 中的 A4 尺寸的頁面？

本質上，我希望能夠在瀏覽器中顯示 HTML 頁面，並以 A4 尺寸頁面的尺寸概述內容。

為了簡單起見，我假設 HTML 頁面只包含文本 (沒有圖像等)，例如沒有<br> 標籤。

此外，當 HTML 頁面打印時，它將作為 A4 尺寸的紙頁出來。

最佳解決方案

以前，2005 年 11 月，AlistApart.com 發表了一篇關於他們如何發佈一本僅使用 HTML 和 CSS 的書籍的文章。參見：http://alistapart.com/article/boom

以下是該文章的摘錄：

CSS2 has a notion of paged media (think sheets of paper), as opposed to continuous media (think scrollbars). Style sheets can set the size of pages and their margins. Page templates can be given names and elements can state which named page they want to be printed on. Also, elements in the source document can force page breaks. Here is a snippet from the style sheet we used:
@page {    size: 7in 9.25in;    margin: 27mm 16mm 27mm 16mm; } 
Having a US-based publisher, we were given the page size in inches. We, being Europeans, continued with metric measurements. CSS accepts both.

After setting the up the page size and margin, we needed to make sure there are page breaks in the right places. The following excerpt shows how page breaks are generated after chapters and appendices:
div.chapter, div.appendix {     page-break-after: always; } 
Also, we used CSS2 to declare named pages:
div.titlepage {   page: blank; } 
That is, the title page is to be printed on pages with the name 「blank.」 CSS2 described the concept of named pages, but their value only becomes apparent when headers and footers are available.

無論如何…

由於您要打印 A4，當然需要不同的尺寸：

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

該文章涉及到設置 page-breaks 等等，所以你可能想要完全閲讀。

在你的情況下，訣竅是先創建打印 CSS 。大多數現代瀏覽器 (> 2005) 支持縮放，並且已經能夠基於打印 CSS 顯示網站。

現在，您將要使網頁顯示看起來有所不同，並使整個設計適應大多數瀏覽器 (包括 2005 年的舊版本) 。為此，您必須創建一個 Web CSS 文件或覆蓋打印 CSS 的某些部分。當創建網頁顯示的 CSS 時，請記住瀏覽器可以有任何大小 (想想：「mobile」最多為「big-screen TV」) 。含義：對於 Web CSS，您的 page-width 和 image-width 最好使用可變寬度 (％) 設置，以儘可能多地支持顯示設備和 web-browsing 客户端。

編輯 (26-02-2015)

今天，我碰巧碰到另一個，更近的 article at SmashingMagazine，它也深入到 HTML 和 CSS 打印設計，以防萬一你可以使用 yet-another-tutorial 。

次佳解決方案

強制瀏覽器顯示與 A4 相同的像素尺寸的頁面是相當容易的。但是，渲染事物時可能會有一些怪癖。

假設您的顯示器顯示 72 dpi，則可以添加如下內容：

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

第三種解決方案

創建每個頁面的部分，並使用以下代碼調整邊距，高度和寬度。

如果您正在打印 A4 尺寸。

然後用户

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

然後創建一個包含所有內容的 div 。

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

要麼

@media print {
            .page-break { height:0; page-break-before:always; margin:0; border-top:none; }
        }
     body, p, span, td, a {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;

  }

第四種方案

我使用 HTML 來生成實際紙張上真實尺寸的 print-out 的報告。

如果您仔細使用 mm 作為您的單位在 CSS 文件中，您應該可以，至少對於單頁。不過，人們可以通過在瀏覽器中更改打印縮放來解決問題。

我似乎記得我所做的一切都是單頁，所以我不必擔心分頁 – 這可能會更難。

第五種方案

A4 尺寸為 210x297mm

所以你可以設置 HTML 頁面適合這些大小與 CSS：

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

第六種方案

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

在你正常的 style.css：

table.tableclassname {
  width: 400px;
}

在您的 print.css：

table.tableclassname {
  width: 16 cm;
}

第七種方案

尋找類似的問題我發現這個 – http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 是一種文檔格式，作為要依賴於圖像分辨率的屏幕圖像，例如 A4 文檔的大小可以調整為：

72 dpi(網絡)= 595 X 842 像素
300 dpi(打印)= 2480 X 3508 像素 (這是”A4″，據我所知，即「210mm X 297mm @ 300 dpi」)
600 dpi(打印)= 4960 X 7016 像素

第八種方案

PPI 和 DPI 對於如何從瀏覽器打印文檔絕對沒有什麼不同。如果要打印的圖像的大小與屏幕上的顯示比例相似，則打印機不會獲取有關屏幕點距或圖像 DPI 的信息。瀏覽器的打印處理器會將圖像的 DPI 從 72dpi 的較低像素增加到文檔其餘部分的 DPI 。説，圖像顯示為半頁寬，物理距離約為 4「，圖像的像素寬度約為 300 像素，以便在瀏覽器中正確顯示，當它以標稱 300DPI 打印時，處理器已添加像素並且圖像將增長到大約 1200 像素，在 300 DPI 是 4「。

當涉及到矢量或非像素的元素 (如文本) 時，如果瀏覽器的寬度為 3000 像素，打印機將根據需要將文本包裝，打印機將從驅動程序中選擇不同於屏幕點距或瀏覽器寬度等的 DPI 。

對於創建打印顯示有什麼困難：每個瀏覽器和打印機將以自己的方式解釋文本大小 (pt，em，px) 和間距。取決於您使用的打印機，瀏覽器甚至操作系統，每頁可以獲得不同的行數和字符數量。所以即使您使用瀏覽器和打印機在計算機上進行測試，並確定您可以在 640×900 像素的框中顯示文本，並且完美打印，那麼試圖打印的下一個人可能會以不同的方式打印出來。實際上沒有辦法強制每個打印機和瀏覽器每次得到相同的。

忘記像素和 moreso 忘記 DPI，唯一可以使用像素的是設置一個表格寬度來模擬打印機上可打印區域的寬度。在這種情況下，我發現 640px 寬是接近的。

第九種方案

從技術上講，您可以，但是需要大量的工作才能使所有瀏覽器完全按照顯示在屏幕上的方式打印出頁面。此外，大多數瀏覽器強制在 print-out 上打印 URL，打印日期和頁面編號，這並不總是需要。這不能改變或禁用。

相反，我建議根據屏幕上的內容創建一個 PDF，並提供 PDF 下載和/或打印。雖然支付 most available PDF libraries，但有幾個 free alternatives 可用於創建基本的 PDF 。

第十種方案

我知道這個話題很舊，但我想分享我關於這個話題的經驗。其實我正在搜索一個可以幫助我的日常報告的模塊。我在 HTML + CSS(而不是 Word，Latex，OO，…) 中寫入一些文檔和一些報告。目的是將它們打印在 A4 紙上以與朋友分享… 而不是搜索，我決定進行一個小的有趣的編碼會話來實現一個可以處理”pages”，頁碼，摘要，頁眉，頁腳的簡單的 lib 最後，我在~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~您可以在我的回購站看看這個項目，不要猶豫分享你的想法。這可能不是你在 100％搜索，但我認為這個模塊可以幫助你。

基本上我創建一個頁面的「width：200mm;」容器高度：290mm(小於 A4) 。然後我用 page-break-after：總是所以瀏覽器的”print” 選項知道何時拆分頁面。

回購：https://github.com/kursion/jsprint

參考文獻

How to make a HTML Page in A4 paper size page(s)?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何在 A4 紙尺寸頁面中製作 HTML 頁面？