Package Exports

html-to-media
html-to-media/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (html-to-media) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

html-to-media

Convert HTML to PNG, JPG, PDF, WebP, GIF, or Video using Puppeteer.

Installation

npm install html-to-media

Usage

Node.js / Express / Next.js API Routes

const { htmlToPdf, htmlToPng, htmlToJpg, htmlToWebp, htmlToGif, htmlToVideo } = require('html-to-media');

const html = `
  <html>
    <body>
      <h1>Hello World</h1>
      <p>This is a test!</p>
    </body>
  </html>
`;

// Generate PDF
await htmlToPdf(html, 'output.pdf');

// Generate PNG
await htmlToPng(html, 'output.png');

// Generate JPG
await htmlToJpg(html, 'output.jpg');

// Generate WebP
await htmlToWebp(html, 'output.webp');

// Generate GIF (requires ffmpeg)
await htmlToGif(html, 'output.gif', { duration: 3000, fps: 10 });

// Generate Video (requires ffmpeg)
await htmlToVideo(html, 'output.mp4', { duration: 5000, fps: 30 });

// With options
await htmlToJpg(html, 'output.jpg', { 
  width: 1920, 
  height: 1080, 
  quality: 90 
});

// PDF with custom options
await htmlToPdf(html, 'output.pdf', {
  format: 'A4',
  landscape: true,
  margin: { top: '20px', bottom: '20px' },
  printBackground: true
});

// PNG with transparent background
await htmlToPng(html, 'output.png', {
  width: 1200,
  height: 800,
  background: false,
  fullPage: false
});

Alternative Usage (Object Notation)

import htmlToMedia from 'html-to-media';

const html = '<h1>Hello World</h1>';

// Use dot notation
await htmlToMedia.pdf(html, 'output.pdf');
await htmlToMedia.png(html, 'output.png');
await htmlToMedia.jpg(html, 'output.jpg');
await htmlToMedia.webp(html, 'output.webp');
await htmlToMedia.gif(html, 'output.gif', { duration: 3000, fps: 10 });
await htmlToMedia.video(html, 'output.mp4', { duration: 5000, fps: 30 });

React / Next.js Usage

Important: This package uses Puppeteer (headless Chrome) and must run on the server-side only.

Next.js API Route Example

// pages/api/generate-pdf.js
import { htmlToPdf } from 'html-to-media';
import path from 'path';

export default async function handler(req, res) {
  const html = req.body.html;
  const outputPath = path.join(process.cwd(), 'public', 'output.pdf');
  
  await htmlToPdf(html, outputPath);
  
  res.status(200).json({ url: '/output.pdf' });
}

React Component Example

// components/HtmlToPdf.jsx
import { useState } from 'react';

export default function HtmlToPdf() {
  const [pdfUrl, setPdfUrl] = useState(null);

  const generatePdf = async () => {
    const html = '<h1>Hello from React!</h1><p>Generated PDF</p>';
    
    const response = await fetch('/api/generate-pdf', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ html })
    });
    
    const data = await response.json();
    setPdfUrl(data.url);
  };

  return (
    <div>
      <button onClick={generatePdf}>Generate PDF</button>
      {pdfUrl && <a href={pdfUrl} download>Download PDF</a>}
    </div>
  );
}

Next.js Server Action Example (App Router)

// app/actions.js
'use server';
import { htmlToPdf } from 'html-to-media';
import path from 'path';

export async function generatePdf(html) {
  const outputPath = path.join(process.cwd(), 'public', 'output.pdf');
  await htmlToPdf(html, outputPath);
  return '/output.pdf';
}

// app/page.jsx
'use client';
import { generatePdf } from './actions';
import { useState } from 'react';

export default function Home() {
  const [pdfUrl, setPdfUrl] = useState(null);

  const handleGenerate = async () => {
    const html = '<h1>Hello Next.js!</h1>';
    const url = await generatePdf(html);
    setPdfUrl(url);
  };

  return (
    <div>
      <button onClick={handleGenerate}>Generate PDF</button>
      {pdfUrl && <a href={pdfUrl}>Download</a>}
    </div>
  );
}

Options

PDF Options

width: Viewport width (px)
height: Viewport height (px)
format: Paper format (A4, Letter, A3, etc.)
landscape: Landscape orientation (default: false)
margin: Page margins ({ top, bottom, left, right })
printBackground: Print background graphics (default: true)

Image Options (PNG, JPG, WebP)

width: Viewport width (px)
height: Viewport height (px)
quality: Image quality 1-100 (JPG/WebP only)
fullPage: Capture full page (default: true)
background: Include background (PNG only, default: true)

GIF/Video Options

width: Viewport width (px)
height: Viewport height (px)
duration: Recording duration in ms (default: 3000 for GIF, 5000 for video)
fps: Frames per second (default: 10 for GIF, 30 for video)
Note: Requires ffmpeg installed on system

License

MIT