O mesmo objeto ReportDefinition vira PDF de duas formas: no navegador, com preview ao vivo, ou no servidor, com bytes prontos para uma Response. Esta página mostra as duas — e como customizar uma célula.
Preview ao vivo
CmReportPdfPreview gera o PDF no navegador (debounced) e o exibe num iframe, a partir da mesma definição e das mesmas 36 linhas de vendas — aqui limitadas às 15 primeiras.
Célula custom (pdfRender)
Quando format não é suficiente, uma coluna pode definir pdfRender: uma função que recebe a linha e o contexto da célula e devolve o elemento react-pdf a desenhar, no lugar do texto padrão.
Situação com cor condicional
A coluna 'pago' troca o texto padrão por um <Text> do react-pdf (reexportado por cosmemilton-report/pdf) verde quando pago e vermelho quando pendente.
Fontes
registerReportFonts registra uma família de fontes para usar em globalConfig.fontFamily e desativa a hifenização automática do react-pdf.
import { registerReportFonts } from "cosmemilton-report/pdf";
// Chame uma vez, antes de renderizar (ex.: no módulo de setup do app,
// ou no topo do route handler que gera o PDF).
registerReportFonts({
family: "Inter",
fonts: [
{ src: "/fonts/Inter-Regular.ttf", fontWeight: "normal" },
{ src: "/fonts/Inter-Bold.ttf", fontWeight: "bold" },
{ src: "/fonts/Inter-Italic.ttf", fontWeight: "normal", fontStyle: "italic" },
],
});
// Depois, use a família registrada em qualquer render:
await renderReportToBuffer({
definition: relatorioVendas,
rows,
globalConfig: { fontFamily: "Inter" },
});Server-side
Fora do navegador, renderReportToBuffer gera os mesmos bytes de PDF — direto num route handler do App Router.
Sem iframe, sem preview: só a definição, as linhas e um buffer pronto para a resposta HTTP.
// app/api/relatorios/vendas.pdf/route.ts
import { renderReportToBuffer } from "cosmemilton-report/pdf";
import { relatorioVendas } from "@/lib/reports/vendas";
export async function GET() {
const rows = await buscarVendas();
const buffer = await renderReportToBuffer({
definition: relatorioVendas,
rows,
});
return new Response(buffer, {
headers: {
"Content-Type": "application/pdf",
"Content-Disposition": 'attachment; filename="vendas.pdf"',
},
});
}