目錄

• 🛠️ 構建高效的 Markdown 轉 PDF 在線工具

• ✨ 主要功能 (Features)
• 🛠️ 技術棧 (Tech Stack)
• 📝 代碼實現亮點

• 1. 核心轉換邏輯
• 2. 打印模式樣式

• 🚀 如何使用

在日常工作和學習中，我們經常需要將 Markdown 筆記轉換為 PDF 文檔以便分享或打印。雖然市面上有許多工具，但它們往往需要安裝龐大的軟件或依賴複雜的後端服務。

本文將介紹一個純前端實現、輕量級且即開即用的 Markdown 轉 PDF 工具。

✨ 主要功能 (Features)

這個工具旨在提供最流暢的寫作與轉換體驗：

1. 👀 實時預覽 (Live Preview)

• 左側編輯，右側實時渲染。
• 支持 GitHub 風格的 Markdown 渲染。

2. 💻 代碼高亮 (Syntax Highlighting)

• 內置 Highlight.js，支持 JavaScript, Python, CSS, HTML 等主流編程語言的語法高亮。
• 代碼塊樣式經過優化，在 PDF 中也能清晰閲讀。

3. 📄 完美導出 PDF

• 基於 html2pdf.js，支持 A4 紙張格式。
• 智能分頁：自動處理圖片、表格和代碼塊的分頁問題，避免內容被截斷。
• 打印級樣式：導出時自動應用優化後的排版樣式（字體、邊距、顏色）。

🛠️ 技術棧 (Tech Stack)

本項目完全基於原生 Web 技術構建，零後端依賴：

📝 代碼實現亮點

1. 核心轉換邏輯

使用 html2pdf.js 並配置高精度的渲染參數：

const opt = {
    margin:       [15, 15, 15, 15], // 優化的頁邊距
    filename:     'document.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { 
        scale: 2, // 2倍縮放以保證清晰度
        useCORS: true, 
        letterRendering: true 
    },
    jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' },
    pagebreak:    { mode: ['avoid-all', 'css', 'legacy'] } // 智能分頁
};

2. 打印模式樣式

為了保證 PDF 的美觀，我們在導出時動態應用特定的 CSS 類：

/* PDF Generation Specific Styles */
.print-mode {
    background-color: white !important;
    border: none !important;
}

.print-mode .markdown-body {
    padding: 0 !important;
    font-family: "Microsoft YaHei", sans-serif; /* 優化字體顯示 */
}

🚀 如何使用

1. 打開工具：雙擊 index.html 或在本地服務器運行。
2. 輸入內容：在左側文本框輸入 Markdown，或點擊 “📂 選擇 Markdown 文件” 上傳本地 .md 文件。
3. 導出：點擊右上角的 “📄 導出為 PDF” 按鈕，稍等片刻即可下載。