Sign in Subscribe

Приложение для рендера медиа из HTML

html2pdfapi — легкий и высокопроизводительный API для рендеринга, созданный на базе Puppeteer

Борис

• 3 min read

html2pdfapi — легкий и высокопроизводительный API для рендеринга, созданный на базе Puppeteer. Это версия программного обеспечения с открытым исходным кодом, которая обеспечивает его работу. Версия SaaS включает дополнительные функции «из коробки»: Поддержка асинхронности с очередью заданий для фоновой обработки Уведомления Webhook о завершении заданий Прямая загрузка S3 в вашу собственную корзину

Возможности

  • 📸 Скриншоты в форматах PNG, JPEG, WebP, GIF, AVIF с любого URL или HTML
  • 📄 Создание PDF-файлов с полным контролем макета страницы
  • 🎬 Запись видео в формате MP4 с плавной анимацией прокрутки
  • 🌐 Полный захват HTML-файлов со всеми встроенными ресурсами
  • ⚡ Пул браузеров с настраиваемой переработкой и прогревом
  • 🔧 Структурированное ведение журнала в формате JSON (Pino)
  • 🐳 Поддержка Docker с конвейером CI

Легкий старт, позволяет развернуть контейнер в Docker . Для начала генерации нужно просто послать POST запрос с параметрами для рендеринга в теле запроса(Body).

Как сделать

Делаем простой скриншот сайта

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "type": "image"}' \
  --output screenshot.png

Сделать PDF из HTML :

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<!DOCTYPE html><html><body><h1>Hello</h1></body></html>",
    "type": "pdf",
    "pdf": {"format": "A4", "margin": {"top": "20px", "bottom": "20px"}}
  }' \
  --output output.pdf

PDF с своими размерами:

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "type": "pdf",
    "pdf": {
      "width": "210mm",
      "height": "400mm",
      "margin": {"top": "10mm", "bottom": "10mm", "left": "10mm", "right": "10mm"}
    }
  }' \
  --output custom-size.pdf

Квитанция/билет в формате PDF (узкий формат):

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<html><body style=\"font-family:monospace\"><h2>RECEIPT</h2><hr><p>Item 1...$10.00</p><p>Total: $10.00</p></body></html>",
    "type": "pdf",
    "pdf": {"width": "80mm", "height": "200mm", "margin": {"top": "5mm", "bottom": "5mm", "left": "5mm", "right": "5mm"}}
  }' \
  --output receipt.pdf

PDF с заголовком и нижним футором:

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "type": "pdf",
    "pdf": {
      "format": "A4",
      "displayHeaderFooter": true,
      "headerTemplate": "<div style=\"font-size:10px;text-align:center;width:100%\">Company Name</div>",
      "footerTemplate": "<div style=\"font-size:10px;text-align:center;width:100%\">Page <span class=\"pageNumber\"></span> of <span class=\"totalPages\"></span></div>",
      "margin": {"top": "20mm", "bottom": "20mm", "left": "10mm", "right": "10mm"}
    }
  }' \
  --output with-header-footer.pdf

WebP скриншот с изменённом качеством:

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "type": "image", "image": {"type": "webp", "quality": 80}}' \
  --output output.webp

Видео со прокруткой страницы:

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "type": "video",
    "video": {"fps": 24},
    "render": {"scroll": {"animate": true, "duration": 3000}}
  }' \
  --output output.mp4

Full HTML capture (resources embedded as data URIs):

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "type": "html"}' \
  --output page.html

Сделать скриншот как с мобильного устройства:

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "type": "image",
    "device": {
      "width": 375,
      "height": 812,
      "scale": 2,
      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15"
    }
  }' \
  --output mobile.png

Сделать скриншот страницы с ожиданием загрузки страницы, лэндинги:

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "type": "image",
    "render": {
      "fullPage": true,
      "triggerLazyAnimations": true,
      "waitTime": 1000
    }
  }' \
  --output fullpage.png

Обрезать и поменять разрешение

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "type": "image",
    "image": {
      "type": "png",
      "crop": {"left": 0, "top": 0, "width": 800, "height": 600},
      "resize": 0.5
    }
  }' \
  --output cropped.png

Скриншот с дополнительными заголовками

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "type": "image",
    "headers": {"Authorization": "Bearer token123"},
    "device": {"locale": "fr-FR", "timezone": "Europe/Paris"}
  }' \
  --output french.png
Enter your email
Subscribe