1 / 21

📄

Part 05 Unit 02

PDF 輸出設定

將 Markdown 轉換成專業 PDF

多種方法、多種選擇

2 / 21

學習目標

完成本單元後，你將學會：

了解 Pandoc PDF 輸出的方法
使用 wkhtmltopdf 轉換 PDF
設定頁面大小和邊距
加入頁首頁尾

3 / 21

PDF 轉換方法比較

方法 A：LaTeX

品質最好
數學公式完美
安裝較複雜（2GB+）
適合學術文件

方法 B：wkhtmltopdf

安裝簡單（50MB）
使用 CSS 樣式
適合一般文件
推薦初學者使用

💡 本單元使用 wkhtmltopdf，簡單快速！

4 / 21

步驟 1：安裝 wkhtmltopdf

使用 winget 安裝

winget install wkhtmltopdf

或手動下載安裝

前往 https://wkhtmltopdf.org/downloads.html
下載 Windows 64-bit 版本
執行安裝程式

⚠️ 安裝後需要重新開啟終端機

5 / 21

步驟 2：確認安裝成功

wkhtmltopdf --version

應該會看到版本資訊：

wkhtmltopdf 0.12.6

✅ 看到版本號表示安裝成功！

6 / 21

步驟 3：兩步驟轉換 PDF

推薦方式：先轉 HTML，再轉 PDF

# 步驟 1：Markdown 轉 HTML
pandoc input.md -o temp.html --standalone --css=style.css

# 步驟 2：HTML 轉 PDF
wkhtmltopdf temp.html output.pdf

💡 這種方式可以完全控制 CSS 樣式

7 / 21

設定頁面大小

常用頁面大小

# A4（預設）
wkhtmltopdf --page-size A4 input.html output.pdf

# Letter（美規）
wkhtmltopdf --page-size Letter input.html output.pdf

# 自訂大小（寬 x 高，單位 mm）
wkhtmltopdf --page-width 210 --page-height 297 input.html output.pdf

尺寸	寬度	高度
A4	210mm	297mm
Letter	216mm	279mm

8 / 21

設定頁面邊距

# 設定四邊邊距（單位 mm）
wkhtmltopdf `
    --margin-top 20 `
    --margin-bottom 20 `
    --margin-left 25 `
    --margin-right 25 `
    input.html output.pdf

💡 一般文件建議邊距 20-25mm

9 / 21

加入頁首頁尾

頁尾加入頁碼

wkhtmltopdf `
    --footer-center "第 [page] 頁，共 [topage] 頁" `
    --footer-font-size 10 `
    input.html output.pdf

頁首加入標題

wkhtmltopdf `
    --header-center "我的文件標題" `
    --header-font-size 10 `
    --header-line `
    input.html output.pdf

10 / 21

頁首頁尾變數

變數	說明
[page]	當前頁碼
[topage]	總頁數
[date]	當前日期
[time]	當前時間
[title]	文件標題

--footer-right "[date] [time]"

11 / 21

設定頁面方向

# 直向（預設）
wkhtmltopdf --orientation Portrait input.html output.pdf

# 橫向
wkhtmltopdf --orientation Landscape input.html output.pdf

💡 橫向適合寬表格或圖表

12 / 21

加入封面頁

建立封面 HTML

<!-- cover.html -->
<div style="text-align: center; padding-top: 200px;">
    <h1 style="font-size: 48px;">我的報告</h1>
    <p style="font-size: 24px;">作者：王小明</p>
    <p style="font-size: 20px;">2025 年 1 月</p>
</div>

轉換時加入封面

wkhtmltopdf cover cover.html content.html output.pdf

13 / 21

加入目錄

wkhtmltopdf toc input.html output.pdf

自訂目錄樣式

wkhtmltopdf `
    --toc-header-text "目錄" `
    --toc-level-indentation 20 `
    toc input.html output.pdf

14 / 21

完整轉換腳本

# md-to-pdf.ps1 - Markdown 轉 PDF 腳本

param([string]$Input = "input.md")

$baseName = [System.IO.Path]::GetFileNameWithoutExtension($Input)
$tempHtml = "$baseName.temp.html"
$output = "$baseName.pdf"

# 步驟 1：轉換 HTML
Write-Host "📄 轉換 HTML..." -ForegroundColor Cyan
pandoc $Input -o $tempHtml --standalone --css=style.css --toc

# 步驟 2：轉換 PDF
Write-Host "📑 轉換 PDF..." -ForegroundColor Cyan
wkhtmltopdf `
    --page-size A4 `
    --margin-top 20 --margin-bottom 25 `
    --margin-left 25 --margin-right 25 `
    --footer-center "第 [page] 頁" `
    --footer-font-size 9 `
    $tempHtml $output

# 清理暫存檔
Remove-Item $tempHtml

Write-Host "✅ 完成：$output" -ForegroundColor Green

15 / 21

PDF 專用 CSS 樣式

/* pdf-style.css */

@media print {
    body {
        font-size: 12pt;
        line-height: 1.6;
    }

    /* 避免標題與內容分離 */
    h1, h2, h3 {
        page-break-after: avoid;
    }

    /* 避免表格跨頁 */
    table {
        page-break-inside: avoid;
    }

    /* 程式碼區塊 */
    pre {
        page-break-inside: avoid;
        white-space: pre-wrap;
    }

    /* 強制換頁 */
    .page-break {
        page-break-before: always;
    }
}

16 / 21

常見問題

問題	解決方法
中文顯示方框	CSS 指定中文字體
圖片不顯示	使用絕對路徑或嵌入 base64
表格被截斷	使用 page-break-inside: avoid
頁首頁尾亂碼	使用英文或設定字體

17 / 21

解決中文問題

/* 確保中文正確顯示 */
body {
    font-family:
        'Microsoft JhengHei',  /* Windows */
        'PingFang TC',         /* macOS */
        'Noto Sans TC',        /* Google */
        sans-serif;
}

/* 頁首頁尾使用英文 */
/* 或使用 HTML 頁首頁尾檔案 */

💡 使用系統內建的中文字體最穩定

18 / 21

動手練習

練習任務

確認 wkhtmltopdf 已安裝
建立一個包含標題、段落、表格的 Markdown
轉換成 HTML（使用 CSS 樣式）
轉換成 PDF（A4、含頁碼）

19 / 21

練習答案

🔒 輸入密碼查看答案

# 1. 確認安裝
wkhtmltopdf --version

# 2. 建立 test.md（包含標題、段落、表格）

# 3. 轉 HTML
pandoc test.md -o test.html --standalone --css=style.css

# 4. 轉 PDF
wkhtmltopdf --page-size A4 `
    --footer-center "第 [page] 頁" `
    test.html test.pdf

20 / 21

wkhtmltopdf 參數速查

參數	說明
--page-size A4	頁面大小
--orientation Landscape	橫向
--margin-top 20	上邊距 (mm)
--header-center "標題"	頁首
--footer-center "[page]"	頁尾頁碼
toc	加入目錄
cover file.html	加入封面

21 / 21

本單元總結

                你學會了：
                安裝和使用 wkhtmltopdf
設定頁面大小和邊距
加入頁首頁尾和頁碼
製作專業的 PDF 文件

            

下一單元：自訂模板 📝