將網頁(HTML)內容轉貼到 Word 的分頁控制

參考網址：Tsung's Blog
 

想要將 網頁(HTML) 的內容, 直接貼到 Word 上, 然後希望可以控制 Word 分頁(做報告方便), 要使用哪個 HTML Tag 呢?

懶得看下述作法的, 可以直接使用結論, 就是下述 Tag.

View Raw Code?

1. <br style="page-break-before:always;">

找 Word 分頁用的 HTML Tag 或參數的方法

1. 於 Word 檔 Ctrl + Enter (產生分頁)
2. 另存 HTML
3. 再去開啟 HTML, 然後分別摘除嘗試即可.
4. 註: CSS 的分頁屬性有這幾個: page-break-after、page-break-before、page-break-inside, 也可以考慮嘗試看看

註: 使用 <p>、<div>… 加上這 style 都不行, 一定要 <br> 才可以.

用相同的方法可以找出控制頁面邊界的CSS
 

<style media="print" type="text/css">
<!--
 /* Page Definitions */
 @page WordSection1
	{size:595.3pt 841.9pt;
	margin:1.0cm 1.0cm 1.0cm 1.0cm;
	layout-grid:18.0pt;}
div.WordSection1
	{page:WordSection1;}
-->
</style>

記得把class套用上去
 

<div class=WordSection1>	
	{{ include file= $content_file  }} 
</div>

同場加映：關於 @media print 的二三事..
 

列印模式下的頁面配置( @page ):

@page 是列印模式下對頁面配置的特殊屬性，主要可設定頁面的 size, margin , orphans 和 widow。

• size 可直接指定寬度與高度(搭配單位 mm 或 cm 皆可)、或是通用尺寸( A4、A5.. )，此外可設定頁面的呈現方向( portrait / landscape )
• margin 就是一般頁面的邊距(常用 word 的人應該不陌生 😀 )
• orphans 和 widow 這印刷術語取名滿妙..， orphans 是指頁面最後一個段落的行數、widow 則是頁面第一個段落的行數，初始值都是2，表示限制頁面頂部及底部的段落不能只顯示一行就被分頁。

@page{
  size: A4 portrait;
  margin: 0.5cm;
  orphans:4;
  widows:2;
}

 

元素分頁的斷點設定:

元素後要被分頁嗎? page-break-after : auto | always | avoid | left | right
元素前要被分頁嗎? page-break-before : auto | always | avoid | left | right
元素本身要被分頁嗎? page-break-inside : auto | avoid
這三個屬性超重要!!!網頁內容無法預估長度的情況下，很難完美的呈現頁面布局，盡可能做到的就是避免顯示的元素被分頁切割。

h1, h2, h3, h4, h5, h6 {
  page-break-after:avoid;
  page-break-inside:avoid
}
h1+p, h2+p, h3+p {
  page-break-before: avoid;
}
a {
  page-break-inside:avoid
}
img{
  page-break-after: avoid;
  page-break-inside: avoid;
}
table, blockquote{
  page-break-inside: avoid;
}
ul, ol, dl {
  page-break-before:avoid;
}
/* 如架構本身用一組一組的 DIV 包住，也可強制設定每組 DIV 會各自切成一頁 */
div.pageBlock{
  page-break-before: always;
}

雖然無法讓想要的內容全部塞在同一頁，但利用 page-break 至少可以限制分頁的斷點判斷~整體閱讀起來也比較舒服了!!