目前前端生成 PDF 最主流的兩種方案是：

1. 客戶(hù)端方案：html2canvas + jsPDF（或其封裝庫(kù) html2pdf.js）
2. 服務(wù)端方案：Puppeteer / Playwright（Node.js 無(wú)頭瀏覽器）

這兩種方案幾乎占據(jù)了 90% 以上的實(shí)際項(xiàng)目。下面從原理、優(yōu)缺點(diǎn)、適用場(chǎng)景、核心代碼、坑點(diǎn)與優(yōu)化等維度進(jìn)行深度對(duì)比。

一、核心對(duì)比表（快速?zèng)Q策）

二、方案一：客戶(hù)端 —— html2canvas + jsPDF（最常用）

原理

1. html2canvas 把 DOM 元素渲染成 Canvas（像素級(jí)截圖）
2. jsPDF 把 Canvas 轉(zhuǎn)為 PDF 文件并下載

推薦庫(kù)

• 直接用 html2pdf.js（封裝版，最推薦）
• 或手動(dòng)組合 html2canvas + jsPDF

核心代碼（Vue 3 + html2pdf.js）

<template>
  <div ref="content">
    <!-- 你的 HTML 內(nèi)容 -->
    <h1>發(fā)票標(biāo)題</h1>
    <table>...</table>
  </div>
  <button @click="exportPDF">導(dǎo)出 PDF</button>
</template>

<script setup>
import html2pdf from 'html2pdf.js'

const content = ref(null)

const exportPDF = () => {
  const opt = {
    margin: [10, 10, 10, 10],
    filename: 'report.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: {
      scale: 2,                    // 清晰度（2倍最合適）
      useCORS: true,               // 跨域圖片
      letterRendering: true
    },
    jsPDF: {
      unit: 'mm',
      format: 'a4',
      orientation: 'portrait'
    }
  }

  html2pdf().set(opt).from(content.value).save()
}
</script>

優(yōu)點(diǎn)

• 零后端，部署最簡(jiǎn)單
• 適合 H5、小程序、內(nèi)部工具

致命缺點(diǎn)（2026 年仍未徹底解決）

• 復(fù)雜 CSS3（flex、grid、陰影、漸變）容易變形
• 中文字體模糊或缺失
• 超長(zhǎng)頁(yè)面容易內(nèi)存溢出
• 分頁(yè)控制極差（經(jīng)常出現(xiàn)表格斷行、頁(yè)眉頁(yè)腳難處理）

優(yōu)化技巧：

• 使用 scale: 2 提升清晰度
• 提前把需要導(dǎo)出的內(nèi)容克隆到一個(gè)隱藏的 div 中，專(zhuān)門(mén)優(yōu)化樣式
• 對(duì)于表格推薦使用 jspdf-autotable 插件單獨(dú)處理

三、方案二：服務(wù)端 —— Puppeteer / Playwright（質(zhì)量之王）

原理

啟動(dòng)無(wú)頭瀏覽器（Headless Chrome / Firefox / WebKit），加載完整 HTML 頁(yè)面后，直接調(diào)用 page.pdf() 生成 PDF。

2026 年推薦：Playwright（已全面超越 Puppeteer）

Playwright 優(yōu)勢(shì)：多瀏覽器支持、自動(dòng)等待、API 更現(xiàn)代、穩(wěn)定性更高。

核心代碼（Node.js + Express）

// pdfService.js
const { chromium } = require('playwright')

async function htmlToPdf(htmlContent) {
  const browser = await chromium.launch({ headless: true })
  const page = await browser.newPage()

  // 關(guān)鍵：設(shè)置視口和打印樣式
  await page.setContent(htmlContent, { waitUntil: 'networkidle' })

  const pdfBuffer = await page.pdf({
    format: 'A4',
    printBackground: true,
    margin: { top: '15mm', bottom: '15mm', left: '10mm', right: '10mm' },
    displayHeaderFooter: true,
    headerTemplate: '<div style="font-size:10px;width:100%;text-align:center;">頁(yè)眉</div>',
    footerTemplate: '<div style="font-size:10px;width:100%;text-align:center;">第 <span class="pageNumber"></span> 頁(yè)</div>'
  })

  await browser.close()
  return pdfBuffer
}

前端調(diào)用示例

const res = await fetch('/api/export-pdf', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ html: document.getElementById('content').outerHTML })
})

const blob = await res.blob()
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'report.pdf'
a.click()

優(yōu)點(diǎn)

• 生成效果幾乎和瀏覽器打印一致
• 原生支持 @page、page-break-before/after 分頁(yè)控制
• 中文字體完美（可加載本地字體或系統(tǒng)字體）
• 支持頁(yè)眉頁(yè)腳、加密、水印、目錄等高級(jí)功能

缺點(diǎn)

• 需要部署 Node 服務(wù)
• 并發(fā)高時(shí)消耗服務(wù)器資源（可使用 puppeteer-cluster / playwright-cluster 做池化）

四、最終推薦（2026 年真實(shí)選擇）

• 推薦客戶(hù)端方案：內(nèi)部工具、簡(jiǎn)單報(bào)表、H5 活動(dòng)頁(yè)、快速 MVP
• 強(qiáng)烈推薦服務(wù)端方案：合同、發(fā)票、正式報(bào)告、需要精確分頁(yè)和美觀樣式的場(chǎng)景
• 混合方案（最優(yōu)解）：前端負(fù)責(zé)編輯預(yù)覽 + 服務(wù)端負(fù)責(zé)最終生成 PDF（目前大廠(chǎng)主流做法）

你現(xiàn)在要做的是哪類(lèi) PDF？

• 簡(jiǎn)單數(shù)據(jù)報(bào)表？
• 合同/發(fā)票類(lèi)正式文件？
• 還是需要頁(yè)眉頁(yè)腳 + 精確分頁(yè)的復(fù)雜報(bào)告？

告訴我具體需求，我可以給你對(duì)應(yīng)方案的最優(yōu)完整代碼模板。

以上就是前端實(shí)現(xiàn)HTML轉(zhuǎn)PDF的兩種主流方案詳解的詳細(xì)內(nèi)容，更多關(guān)于前端HTML轉(zhuǎn)PDF方案的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論