Текст в PDF: создание документов в браузере

Введение

PDF — универсальный формат для документов: он сохраняет вёрстку на любом устройстве, поддерживает шрифты, изображения и печать. Создание PDF традиционно ассоциировалось с серверными библиотеками или десктопными программами, но сегодня полный цикл можно реализовать прямо в браузере. В этой статье разберём, как работаетсоздание PDF из текста без сервера, какие библиотеки использовать и как настроить шрифты, разметку и печать.

Зачем генерировать PDF в браузере

• Приватность — документы не покидают компьютер пользователя. Это критично для договоров, отчётов и персональных данных.
• Скорость — нет сетевого запроса и ожидания ответа сервера. PDF создаётся мгновенно.
• Снижение нагрузки на сервер — вычисления происходят на клиенте, сервер не занимается рендерингом.
• Офлайн-работа — после загрузки страницы инструмент работает без интернета.
• Простота деплоя — статический хостинг без бэкенда, никаких зависимостей от серверного стека.
• Кросс-платформенность — работает в любом современном браузере на любой ОС.

Библиотеки для генерации PDF

jsPDF

Самая популярная библиотека для генерации PDF в JavaScript. Размер около 350 КБ, не требует зависимостей, поддерживает текст, изображения, простую вёрстку, шрифты. Минус — нет автоматической раскладки текста по страницам, нужно вручную отслеживать переполнение.

import { jsPDF } from 'jspdf';

const doc = new jsPDF({ unit: 'mm', format: 'a4' });
doc.setFontSize(14);
doc.text('Привет, мир!', 20, 30);

const paragraphs = ['Абзац 1.', 'Абзац 2.', 'Абзац 3.'];
let y = 50;
for (const p of paragraphs) {
  const lines = doc.splitTextToSize(p, 170);
  doc.text(lines, 20, y);
  y += lines.length * 7;
  if (y > 280) { doc.addPage(); y = 30; }
}

doc.save('document.pdf');

pdf-lib

Более современная альтернатива с поддержкой модификации существующих PDF, встраивания шрифтов, изображений, форм. Имеет чистый API и активно поддерживается.

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';

const doc = await PDFDocument.create();
const font = await doc.embedFont(StandardFonts.Helvetica);
const page = doc.addPage([595, 842]); // A4 в пунктах

page.drawText('Привет, мир!', {
  x: 50,
  y: 750,
  size: 14,
  font,
  color: rgb(0, 0, 0),
});

const bytes = await doc.save();
const blob = new Blob([bytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
// Дальше можно открыть в новой вкладке или скачать

html2pdf.js и print

Для простой конвертации HTML в PDF применяют html2pdf.js (обёртка надhtml2canvas и jsPDF) или печать черезwindow.print() с CSS-правилом @media print. Печать браузером — самый простой способ, но он не подходит для автоматической генерации и даёт пользователю диалог печати.

Выбор библиотеки

Для простых документов — jsPDF или pdf-lib. Для сложной вёрстки с CSS — html2pdf, но с потерей качества (текст рендерится как картинка). Если нужна автоматическая раскладка длинного текста, придётся писать логику paginate вручную.

Поддержка кириллицы

Стандартные шрифты PDF (Helvetica, Times, Courier) не содержат кириллических символов. Чтобы выводить русский текст, нужно встроить кастомный шрифт. Подойдёт любой TTF с поддержкой кириллицы: Roboto, Noto Sans, PT Sans, DejaVu Sans.

// pdf-lib
const fontBytes = await fetch('/fonts/Roboto-Regular.ttf').then(r => r.arrayBuffer());
const font = await doc.embedFont(fontBytes);

page.drawText('Привет, мир!', {
  x: 50, y: 750, size: 14, font,
});

В jsPDF процедура похожая, но через doc.addFileToVFS иdoc.addFont. Учитывайте, что встраивание шрифта увеличивает размер PDF на 100–500 КБ. Для веб-приложений шрифт можно кэшировать через Service Worker, чтобы не загружать повторно.

Разметка и пагинация

Главная сложность при генерации PDF из текста — автоматический перенос по страницам. Библиотеки не знают, сколько места займёт абзац, пока вы его не отрисуете. Подход:

1. Разбейте текст на абзацы и блоки (заголовки, списки).
2. Для каждого блока вычислите высоту с учётом шрифта и ширины страницы.
3. Если блок не помещается на текущей странице, добавьте новую.
4. Для длинных абзацев делите их на строки через splitTextToSize (jsPDF) или аналог.
5. Учитывайте поля страницы (обычно 20–25 мм).

Сложные документы с таблицами и изображениями требуют ещё больше логики: таблицу нельзя разрезать посередине строки, изображение нужно переносить целиком или масштабировать.

Настройка страницы

Перед созданием PDF задайте размер страницы, ориентацию и поля. Стандартные размеры:

Сохранение и печать

Сгенерированный PDF можно сохранить на диск или открыть в новой вкладке:

// Скачать файл
const blob = new Blob([bytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'document.pdf';
a.click();
URL.revokeObjectURL(url);

// Открыть в новой вкладке
window.open(url, '_blank');

Не забывайте освобождать URL через URL.revokeObjectURL, иначе будет утечка памяти. Для печати PDF используйте window.print() после открытия, но поведение зависит от браузера.

Лучшие практики

• Используйте векторный текст — он остаётся чётким при любом масштабе и доступен для выделения и поиска.
• Встраивайте шрифты — иначе на другом устройстве PDF может отображаться с другими шрифтами.
• Добавляйте метаданные — заголовок, автор, тема, ключевые слова. Это помогает поиску и индексации.
• Учитывайте поля — стандарт 20–25 мм со всех сторон, больше для брошюр.
• Тестируйте печать — проверяйте, как PDF выглядит на бумаге, а не только на экране.
• Оптимизируйте размер — изображения сжимайте, шрифты субсетируйте.
• Делайте PDF доступным — добавляйте alt-текст к изображениям, правильную иерархию заголовков, теги для скринридеров.

Инструменты ConvertHub

Для разовых задач используйте наши онлайн-инструменты. Текст в PDF — простой конвертер с настройкой шрифта и формата страницы. Если у вас HTML-страница, подойдёт HTML в PDF, а для Markdown — Markdown в PDF. Все инструменты работают локально в браузере, без отправки данных на сервер.

Сценарии использования

• Создание договоров и счетов из шаблонов.
• Генерация отчётов и аналитических сводок.
• Выгрузка квитанций и чеков из веб-приложений.
• Конвертация статей и заметок для печати.
• Создание PDF-резюме из формы ввода.
• Генерация сертификатов и грамот.

Заключение

Создание PDF из текста в браузере — реализуемая задача, требующая понимания нюансов: выбора библиотеки, встраивания кириллических шрифтов, ручной пагинации и настройки страницы. Для простых документов достаточно jsPDF или pdf-lib, для сложной вёрстки — html2pdf с потерей качества. Главное преимущество браузерной генерации — приватность: данные не покидают компьютер пользователя. Для разовых задач используйте онлайн-конвертер ConvertHub, для встраивания в приложение — соответствующие библиотеки.