HTML и CSS в PDF на PHP: полное руководство с примерами

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Введение: Почему вам может понадобиться превратить HTML в PDF?

Представьте ситуацию: вы создали красивый счёт-фактуру на сайте, верстали его в HTML, добавили стилей, и всё выглядит идеально. Но клиент просит прислать PDF. Или вам нужно сгенерировать отчёт с графиками, таблицами и сложной вёрсткой. Вручную рисовать PDF — это прошлый век. Гораздо проще написать HTML+CSS, а затем программно превратить его в PDF.

Вопрос «How Can I add HTML And CSS Into PDF» на Stack Overflow собрал тысячи просмотров — это значит, что проблема актуальна для многих разработчиков. В этой статье мы разберём три самых популярных способа сделать это на PHP, покажем примеры кода и поможем выбрать лучший инструмент для вашей задачи.

Сравнение библиотек: Dompdf, TCPDF и mPDF

Прежде чем писать код, давайте разберёмся, что выбрать. На рынке PHP есть три главных «кита» для конвертации HTML в PDF:

Dompdf — лёгкая библиотека, отлично понимает CSS 2.1 и частично CSS 3. Идеальна для простых документов.
TCPDF — мощная, стабильная, но требует больше кода для сложной вёрстки. Не очень дружит с CSS.
mPDF — лучший выбор, если вам нужна поддержка сложного CSS (flexbox, градиенты, прозрачность). Самая «CSS-дружелюбная» библиотека.

В этой статье мы сосредоточимся на mPDF как на самом удобном варианте, но покажем и примеры с Dompdf для сравнения.

Установка библиотек через Composer

Для начала создадим проект и установим зависимости. Откройте терминал и выполните:

composer require mpdf/mpdf

Если хотите попробовать Dompdf:

composer require dompdf/dompdf

Теперь создадим файл generate_pdf.php в корне проекта и начнём писать код.

Пример 1: Простой HTML в PDF с mPDF

Начнём с самого базового примера. Допустим, у нас есть HTML-шаблон счёта:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; }
        .invoice { max-width: 800px; margin: 0 auto; }
        .header { background: #4CAF50; color: white; padding: 20px; }
        .total { font-size: 24px; font-weight: bold; }
    </style>
</head>
<body>
    <div class="invoice">
        <div class="header">Счёт №123 от 01.03.2025</div>
        <p>Клиент: Иван Петров</p>
        <table border="1" width="100%">
            <tr><th>Услуга</th><th>Цена</th></tr>
            <tr><td>Разработка сайта</td><td>50 000 руб.</td></tr>
            <tr><td>SEO-продвижение</td><td>15 000 руб.</td></tr>
        </table>
        <div class="total">Итого: 65 000 руб.</div>
    </div>
</body>
</html>

Теперь код PHP для генерации PDF:

<?php
require_once __DIR__ . '/vendor/autoload.php';

$html = file_get_contents('invoice.html'); // или просто строка с HTML

$mpdf = new \Mpdf\Mpdf();
$mpdf->WriteHTML($html);
$mpdf->Output('invoice.pdf', 'I'); // 'I' — открыть в браузере, 'D' — скачать
?>

Запустите скрипт — и PDF готов! Обратите внимание: mPDF автоматически подхватил CSS из <style>. Это и есть ответ на вопрос «How Can I add HTML And CSS Into PDF» — просто передайте HTML с CSS в WriteHTML().

Пример 2: Работа с внешними CSS-файлами

Часто стили хранятся в отдельных файлах. mPDF поддерживает подключение внешних CSS через <link>:

<?php
$html = '
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Отчёт за март 2025</h1>
    <p class="highlight">Продажи выросли на 20%!</p>
</body>
</html>
';

$mpdf = new \Mpdf\Mpdf();
$mpdf->WriteHTML($html);
$mpdf->Output('report.pdf', 'D');
?>

Важно: путь к CSS указывается относительно корня проекта, а не относительно скрипта. Если стили не применяются, попробуйте передать их напрямую в теге <style> — это надёжнее.

Пример 3: Вставка изображений и сложных элементов

Предположим, в PDF нужно вставить логотип компании. mPDF поддерживает base64, локальные файлы и URL:

<?php
$html = '
<!DOCTYPE html>
<html>
<body>
    <img src="logo.png" width="200">
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px;">
        <h2>Градиентный блок</h2>
        <p>mPDF отлично работает с градиентами!</p>
    </div>
    <table style="border-collapse: collapse;">
        <tr><td style="border: 1px solid #ddd; padding: 8px;">Ячейка 1</td>
        <td style="border: 1px solid #ddd; padding: 8px;">Ячейка 2</td></tr>
    </table>
</body>
</html>
';

$mpdf = new \Mpdf\Mpdf([
    'default_font' => 'dejavusans', // поддержка кириллицы
    'mode' => 'utf-8'
]);
$mpdf->WriteHTML($html);
$mpdf->Output('complex.pdf', 'F'); // 'F' — сохранить в файл
?>

Обратите внимание на параметр mode => 'utf-8' — он обязателен для корректного отображения кириллицы. Без него русские буквы превратятся в кракозябры.