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

是否可使HTML頁面的行爲相似於MS Word中的A4大小的頁面？

本質上，我但願可以在瀏覽器中顯示HTML頁面，並以A4尺寸頁面的尺寸概述內容。

爲了簡單起見，我假設HTML頁面僅包含文本（沒有圖像等），而且沒有例如<br>標記。

另外，當打印HTML頁面時，它將以A4尺寸的紙頁形式出現。

---

#1樓

在每一個頁面上建立一個部分，並使用如下代碼調整邊距，高度和寬度。

若是要打印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, 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;
}

---

#2樓

我知道這個主題已經很老了，可是我想分享一下我對該主題的經驗。 實際上，我正在搜索一個能夠幫助我處理平常報告的模塊。 我正在用HTML + CSS編寫一些文檔和報告（而不是Word，Latex，OO等）。 其目標是將它們打印在A4紙上，以便與朋友共享。...而不是進行搜索，我決定進行一次小型有趣的編碼會議，以實施一個簡單的lib，該lib能夠處理「頁面」，頁碼，摘要，標題，頁腳，....最後，我在~~ 2h內完成了此操做，我知道這不是有史以來最好的工具，但就個人目的而言幾乎能夠。 您能夠在個人倉庫中查看該項目，並隨時分享您的想法。 也許不是您要100％搜索的內容，可是我認爲該模塊能夠爲您提供幫助。

基本上，我建立一個頁面「寬度：200mm」； 和高度爲290mm（小於A4）的容器。 而後我使用page-break-after：always; 所以瀏覽器的「打印」選項知道什麼時候拆分頁面。

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

---

#3樓

早在2005年11月，AlistApart.com發表了一篇文章，介紹了他們如何只使用HTML和CSS來出版一本書。 請參閱： http ： //alistapart.com/article/boom

這是該文章的摘錄：

CSS2具備分頁媒體（想像紙）的概念，而不是連續媒體（想像滾動條）的概念。 樣式表能夠設置頁面的大小及其頁邊距。 能夠爲頁面模板指定名稱，元素能夠聲明要在其上打印的命名頁面。 一樣，源文檔中的元素可能會強制分頁符。 這是咱們使用的樣式表的摘錄：

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

擁有一家美國發行商，咱們獲得的頁面大小以英寸爲單位。 做爲歐洲人，咱們繼續進行公制測量。 CSS都接受。

設置頁面大小和邊距後，咱們須要確保在正確的位置存在分頁符。 如下摘錄顯示如何在各章和附錄以後生成分頁符：

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

另外，咱們使用CSS2來聲明命名頁面：

div.titlepage { page: blank; }

也就是說，標題頁將被打印在名稱爲「 blank」的頁面上。CSS2描述了命名頁面的概念，可是隻有當頁眉和頁腳可用時，它們的值才變得明顯。

不管如何…

因爲要打印A4，所以固然須要不一樣的尺寸：

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

本文深刻探討了設置分頁符等內容，所以您可能須要完整閱讀。

在您的狀況下，技巧是首先建立打印CSS。 大多數現代瀏覽器（> 2005）都支持縮放，而且已經可以基於打印CSS顯示網站。

如今，您將要使Web外觀看起來有些不一樣，並使整個設計也適應大多數瀏覽器（包括2005年以前的舊瀏覽器）。 爲此，您必須建立一個Web CSS文件或覆蓋打印CSS的某些部分。 在建立用於Web顯示的CSS時，請記住瀏覽器能夠具備任意大小（請考慮：「移動」到「大屏幕電視」）。 含義：對於Web CSS，最好使用可變寬度（％）設置頁面寬度和圖像寬度，以支持儘量多的顯示設備和Web瀏覽客戶端。

編輯（26-02-2015）

今天，我偶然發現了SmashingMagazine上的另一篇較新的文章，該文章還深刻探討了使用HTML和CSS設計打印的狀況，以防萬一您可使用另外一本教程。

編輯（30-10-2018）

引發我注意的是， size無效的CSS3確實是正確的-我只是重複了文章中引用的代碼（如前所述），它是舊的CSS2（當您查看本文的年份時，這頗有意義）而且該答案首次​​發佈）。 不管如何，如下是有效的CSS3代碼，以方便您進行復制和粘貼：

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

若是您認爲確實須要像素（ 實際上應該避免使用pixel ），則必須選擇正確的DPI進行打印：

• 72 dpi（網絡）= 595 X 842像素
• 300 dpi（打印）= 2480 X 3508像素
• 600 dpi（高質量打印）= 4960 X 7016像素

可是，我會避免麻煩，只需使用cm （釐米）或mm （毫米）來進行大小調整，由於這樣能夠避免出現渲染故障，具體取決於您使用的客戶端。

---

#4樓

A4尺寸爲210x297mm

所以，您能夠設置HTML頁面以使其適合CSS尺寸：

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

---

#5樓

從技術上講，您能夠，可是要使全部瀏覽器徹底按照屏幕上的顯示打印出頁面，須要大量的工做。 一樣，大多數瀏覽器在打印輸出上強制使用URL，打印日期和頁碼，但這並不是老是如此。 這不能更改或禁用。

相反，我建議您根據屏幕上的內容建立一個PDF並將其提供給下載和/或打印。 儘管大多數可用的PDF庫都是付費的，可是有一些免費的替代方法可用於建立基本PDF。