pdf-eleven-ts

HTML/CSS para PDF vetorial (MVP) em Node.js + TypeScript.

Recursos do MVP

• HTML básico: div, span, p, strong, em, h1–h3, ul/ol/li, br, img (placeholder)
• CSS básico: font-*, color, background-color, margin, padding, width, height, text-align, line-height
• Layout simples: fluxo vertical com inline básico
• Saída: arquivo .pdf e Buffer

Instalação (local)

npm install

Build

npm run build

Uso via API (Node.js)

import { renderToPdfFile, renderToPdfBuffer } from "pdf-eleven-ts";

const html = `<h1>Hello</h1><p>Teste <strong>PDF</strong>.</p>`;
const css = `h1 { color: #3366cc; }`;

await renderToPdfFile(html, css, "output.pdf");
const buffer = await renderToPdfBuffer(html, css);

Uso via CLI

Rodar em modo dev:

npm run cli -- --html examples/example.html --css examples/example.css --out output.pdf

Gerar buffer (stdout):

npm run cli -- --html inline:<h1>Hello</h1> --buffer > out.pdf

Após build, usar como bin:

npm run build
npx pdf-eleven --html examples/example.html --css examples/example.css --out output.pdf

Atalho na raiz (arquivos copiados):

npx pdf-eleven --html example.html --css styles.css --out report.pdf

Opções do CLI

# Tamanho de página predefinido
npx pdf-eleven --html example.html --css styles.css --size LETTER

# Tamanho personalizado (pontos do PDF)
npx pdf-eleven --html example.html --css styles.css --page-width 500 --page-height 800

# Margens
npx pdf-eleven --html example.html --css styles.css --margin 40
npx pdf-eleven --html example.html --css styles.css --margin 40,30,40,30
npx pdf-eleven --html example.html --css styles.css --margin 40 30 40 30
npx pdf-eleven --html example.html --css styles.css --margin 40 30
npx pdf-eleven --html example.html --css styles.css --margin 40 30 20

# Saída em stdout
npx pdf-eleven --html example.html --css styles.css --out - > report.pdf

Como instalar no seu projeto pessoal

Opção A (local path):

npm install ../pdf-eleven-ts

Opção B (link para desenvolvimento):

npm link
# no seu projeto:
npm link pdf-eleven-ts

Guia completo de integração (outros projetos)

1) Instalação (3 opções)

Local (path):

npm install C:\Users\anton\Github\pdf-eleven-ts\pdf-eleven-ts-0.1.0.tgz

Link para desenvolvimento:

# no pdf-eleven-ts
npm link
# no seu projeto
npm link pdf-eleven-ts

Monorepo (workspace):

# no package.json do seu projeto
{
  "dependencies": {
    "pdf-eleven-ts": "workspace:*"
  }
}

2) Uso via API (Node.js)

import { renderToPdfFile, renderToPdfBuffer } from "pdf-eleven-ts";

const html = `
  <h1>Relatório</h1>
  <p>Texto <strong>forte</strong> e <em>itálico</em>.</p>
`;

const css = `
  h1 { color: #1b4f9c; margin-bottom: 12px; }
  p { margin-bottom: 6px; }
`;

await renderToPdfFile(html, css, "relatorio.pdf");
const buffer = await renderToPdfBuffer(html, css);
console.log("Buffer size:", buffer.length);

3) Uso via API (com HTML/CSS de arquivos)

import fs from "fs";
import { renderToPdfFile } from "pdf-eleven-ts";

const html = fs.readFileSync("template.html", "utf8");
const css = fs.readFileSync("styles.css", "utf8");

await renderToPdfFile(html, css, "saida.pdf");

4) Uso via CLI (em outro projeto)

npx pdf-eleven --html template.html --css styles.css --out saida.pdf

5) Como embutir em um serviço (ex.: API)

import express from "express";
import { renderToPdfBuffer } from "pdf-eleven-ts";

const app = express();
app.use(express.json({ limit: "2mb" }));

app.post("/pdf", async (req, res) => {
  const html = req.body.html || "";
  const css = req.body.css || "";
  const buffer = await renderToPdfBuffer(html, css);
  res.setHeader("Content-Type", "application/pdf");
  res.setHeader("Content-Disposition", "inline; filename=doc.pdf");
  res.send(buffer);
});

app.listen(3000);

6) Dicas de qualidade e performance

• Reutilize CSS simples no MVP (evite layouts complexos por enquanto).
• Prefira fontes padrão do PDF (Helvetica, Times, Courier) para evitar problemas.
• Para documentos longos, gere PDF no servidor com filas e limite de concorrência.
• Evite imagens grandes (no MVP ainda são placeholders).

7) Problemas comuns

• "PDF vazio": HTML sem conteúdo ou tudo com display: none.
• Fonte não encontrada: use font-family: Helvetica no MVP.
• Margens estranhas: passe --margin ou options.margin.

Exemplo de arquivo

• examples/example.html
• examples/example.css
• examples/example.ts