在網頁中設計 Word 格式匯出功能最簡單的方式 | The Will Will Web

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

在網頁中設計 Word 格式匯出功能最簡單的方式

這其實是個很簡單的技巧,不過好像還是有些人不知道的,所以今天臨時想到就寫下來分享。不知道 Office 從何時開始支援開啟 HTML 文件,也就是說任何 HTML 的文件其實都可以在 Word 中直接開啟,甚至於你可以在瀏覽網頁時將網頁上的文字進行複製,然後到 Word 中貼上是可以保留網頁上的格式設定的。

當我們希望在網頁中提供 "Word 格式匯出" 功能時,其實最簡單的方式就是直接輸出 HTML 格式的內容,並且直接將下載檔案的副檔名改成 *.doc 即可。

若以下範例來說,<h1> 會自動轉譯成 Word 中的 "標題一" 段落樣式,而 <h2> 會動轉成 Word 中的 "標題二" 樣式。

<html>
<head>
<style> p { color: blue; } </style>
</head>
<body>
    <h1>這是文章標題</h1>
    <h2>這是文章副標題</h2>
    <hr/>
    <p>段落一段落一段落一段落一段落一段落一段落一段落一段落一段落一段落一段落一</p>
    <p>段落二 段落二 段落二 段落二 段落二 段落二 段落二 段落二 段落二 段落二 段落二</p>
</body>
</html>

除此之外,Word 可以認識的還不只這些,你若在網頁中設定 CSS 也是可以的,彈性十分的大。但要特別注意,載入 CSS 時不能用 Link 的方式,因為 Word 並不會載入外部的 CSS 定義檔!

而對我來說,最方便的地方莫過於寫一個【文件產生器】了,利用 HTML 產生一組文件的內容,然後用 Word 開啟後再進行後續的排版編輯、設定整體的樣式等,非常的有效率。