跳轉到

HTML 轉 PDF 指南

先決條件

composer require nextpdf/artisan

系統需求

元件 版本需求 說明
Google Chrome / Chromium ≥ 120 Headless 模式
chrome-php/chrome ^1.15 CDP 橋接函式庫
PHP ^8.5 —

基本用法

use NextPDF\Artisan\ArtisanRenderer;
use NextPDF\Artisan\ValueObjects\RenderOptions;
use NextPDF\Core\ValueObjects\PageSize;
use NextPDF\Core\ValueObjects\Margin;

$renderer = ArtisanRenderer::create(
    chromePath: '/usr/bin/google-chrome',
);

$pdf = $renderer->renderHtml(
    html:    '<h1>Hello, World!</h1>',
    options: RenderOptions::create(
        pageSize: PageSize::A4,
        margin:   Margin::uniform(15.0),
    ),
);

$pdf->save('/output/from-html.pdf');

渲染 URL

$pdf = $renderer->renderUrl(
    url:     'https://example.com',
    options: RenderOptions::create(
        pageSize:         PageSize::A4,
        waitUntil:        'networkidle0',
        navigationTimeout: 30_000,
    ),
);

CSS 支援範圍

分頁控制

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

/* 避免元素被切分 */
.avoid-break { page-break-inside: avoid; }

/* 頁首頁尾（CSS Paged Media） */
@page {
    margin: 15mm;
    @top-center { content: "NextPDF Report"; }
    @bottom-right { content: counter(page); }
}

Web 字型

<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
  body { font-family: 'Noto Sans TC', sans-serif; }
</style>

Flexbox 與 Grid 佈局

<div style="display: flex; justify-content: space-between;">
    <div style="flex: 1;">Left Column</div>
    <div style="flex: 1;">Right Column</div>
</div>

自訂頁首與頁尾

$options = RenderOptions::create(
    pageSize: PageSize::A4,
)->withHeaderTemplate(
    html: '<div style="font-size:10px;text-align:right;width:100%;">
               <span class="pageNumber"></span> / <span class="totalPages"></span>
           </div>',
)->withFooterTemplate(
    html: '<div style="font-size:8px;text-align:center;width:100%;">
               Confidential — Generated by NextPDF
           </div>',
);

效能調校

安全性注意事項

延伸閱讀