HTML a PDF en Power Apps Canvas Apps con un componente PCF

HTML a PDF en Power Apps Canvas Apps con un componente PCF para vista previa inline, impresion y descarga PDF opcional, pensado para Microsoft Power Platform.

Harllens George | 2026-02-26

Esta guia muestra una forma simple de hacer HTML a PDF en Power Apps Canvas Apps con un componente PCF para Microsoft Power Platform. Es para apps de negocio donde ya tienes HTML y quieres una vista previa limpia y una salida confiable a PDF.

Lo importante: puedes tener una buena version v1 sin un convertidor backend, y sin depender de Power Automate para imprimir o descargar.

Que puedes hacer

Vista previa de HTML dentro de la app
Imprimir con el dialogo del navegador (Save as PDF)
Descarga PDF opcional desde el componente
Obtener el PDF como base64 para guardarlo en SharePoint u otros sistemas via Power Automate

Para quien es

Makers de Power Platform que construyen flujos de documentos en Canvas Apps
Equipos que quieren un comportamiento de exportacion consistente
Proyectos que quieren una solucion v1 del lado del cliente antes de un render backend

Get it

Repositorio GitHub: Just-Boring-Cat/html-pdf-converter-pcf

Como usarlo (alto nivel)

Importa la solucion y agrega el componente PCF a tu Canvas App.
Pasa el string HTML que quieres exportar.
Revisa el layout en la vista previa inline.
Exporta usando imprimir a PDF (recomendado) o descarga opcional.

Capturas

El componente en Canvas App

Componente HTML a PDF en Power Apps Canvas App, vista previa.

Propiedades (configuracion del maker)

Propiedades y configuracion del componente HTML a PDF en Power Apps Canvas App.

Ejemplo de salida via impresion

Ejemplo de flujo de impresion y vista previa de salida generada.

Plantilla HTML de ejemplo

Si quieres un punto de partida listo, puedes copiar esta plantilla de una pagina en el componente. Usa CSS inline e incluye un logo de ejemplo en base64, asi funciona bien cuando assets externos estan bloqueados.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>The Boring Cat | HTML a PDF ejemplo</title>
  <style>
    :root { --paper: #ffffff; --ink: #1f2937; --line: #d8e2f0; }
    body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; color: var(--ink); }
    .page { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 9mm; background: var(--paper); border: 1px solid var(--line); }
    .hero { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; }
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .card { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
  </style>
</head>
<body>
  <div class="page">
    <header class="hero">
      <img alt="Logo" src="data:image/png;base64,..." />
      <div>
        <h1>The Boring Cat</h1>
        <div>HTML a PDF ejemplo</div>
      </div>
    </header>
    <section class="grid">
      <div class="card">...</div>
      <div class="card">...</div>
    </section>
  </div>
</body>
</html>

[[htmlsample:/content/documents/power-apps-html-to-pdf-pcf-component-canvas-apps/samples/the-boring-cat-one-page-sample.html]]

Ejecutar imprimir o descargar desde botones de Canvas

Puedes usar los botones dentro del componente, o disparar acciones desde botones normales de Canvas.

Idea (alto nivel):

Enlaza una variable de Canvas al input de comando del componente (por ejemplo actionCommand).
Cambia la variable desde un boton con un string de comando JSON.
El componente ejecuta el comando y actualiza sus outputs.

Ejemplo (Power Fx, descargar):

Set(
    varPdfCmd,
    Concatenate(
        "{",
        Substitute(
            quot;'id':'{GUID()}','action':'download'",
            "'",
            Char(34)
        ),
        "}"
    )
);

Ejemplo (Power Fx, imprimir):

Set(
    varPdfCmd,
    Concatenate(
        "{",
        Substitute(
            quot;'id':'{GUID()}','action':'print'",
            "'",
            Char(34)
        ),
        "}"
    )
);

Capturas:

Ejemplo de comando de boton Canvas para descarga.

Ejemplo de comando de boton Canvas para imprimir.

Obtener el PDF como base64 (para SharePoint y automatizacion)

Si quieres guardar el PDF en un sistema externo, usa el output base64 del componente y pasalo a Power Automate (por ejemplo para subirlo a SharePoint).

Ejemplo (expresion Power Automate, patron comun):

base64ToBinary(last(split(pdfBase64, ",")))

Tips practicos

Usa imprimir a PDF como ruta principal cuando el layout importa.
Puedes imprimir o descargar sin flujos. Power Automate es util si quieres guardar el PDF automaticamente.
Prefiere imagenes base64 en tu HTML para evitar CORS y assets bloqueados.
Los saltos de linea son HTML normal. Usa <div>, <p>, o <br> como en la web.
Para documentos muy grandes, un renderer backend puede ser mejor mas adelante.

Tradeoffs conocidos

La impresion depende del navegador y de la interaccion del usuario.
La descarga client-side puede ser rasterizada y no es ideal para PDFs buscables.

Conclusion

Si necesitas HTML a PDF en Power Apps Canvas Apps, este componente PCF es una opcion practica: vista previa, impresion y descarga opcional, con un setup simple para proyectos en Microsoft Power Platform.