如何在 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 頁面？