MAD Lab

Documentos PDF

mad-doc-header-band mad-doc-footer-band mad-doc-signature mad-doc-qrcode mad-doc-page-number mad-doc-variable-field

Cabeçalho e rodapé fixos

mad-doc-header-band + mad-doc-footer-band + mad-doc-page-number (preview em mockup — veja o comentário no código).

mad-doc-header-band, mad-doc-footer-band e mad-doc-page-number

Faixas com position:fixed que repetem no topo e no rodapé de TODA página do PDF, mais o número da página atual no rodapé. Incluir isso ao vivo aqui prenderia a faixa no topo da JANELA do navegador (mesmo CSS, "página" diferente) por cima do resto desta tela — por isso o preview abaixo é um mockup estático; o botão "Ver PDF" mostra os componentes de verdade.

MAD LabRelatório de exemplo

(conteúdo do documento)

Página 1

resources/views/tutor/examples/pdf-avancado/cabecalho-rodape.blade.php

<mad-alert type="info" title="mad-doc-header-band, mad-doc-footer-band e mad-doc-page-number">
    Faixas com position:fixed que repetem no topo e no rodapé de TODA página do PDF, mais o
    número da página atual no rodapé. Incluir isso ao vivo aqui prenderia a faixa no topo da
    JANELA do navegador (mesmo CSS, "página" diferente) por cima do resto desta tela — por isso
    o preview abaixo é um mockup estático; o botão "Ver PDF" mostra os componentes de verdade.
</mad-alert>
<div style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin-top:10px;">
    <div style="background:#1e3a8a;color:#fff;padding:8px 12px;display:flex;justify-content:space-between;font-size:.85rem;">
        <strong>MAD Lab</strong><span>Relatório de exemplo</span>
    </div>
    <div style="padding:28px 12px;color:#94a3b8;text-align:center;font-size:.85rem;">
        (conteúdo do documento)
    </div>
    <div style="background:#f1f5f9;padding:6px 12px;text-align:center;font-size:.8rem;color:#475569;">
        Página 1
    </div>
</div>

Ver PDF

Assinatura e QR code

mad-doc-signature + mad-doc-qrcode + mad-doc-variable-field num termo de recebimento.

Termo de recebimento

Recebedor: Ana Souza

Data/hora: 04/09/2026 16:03

Confirmo o recebimento da mercadoria descrita no pedido abaixo, em perfeito estado.

Ana Souza

Recebedor

resources/views/tutor/examples/pdf-avancado/assinatura-codigos.blade.php

<mad-doc-heading :level="2">Termo de recebimento</mad-doc-heading>
<mad-doc-variable-field value="Ana Souza" prefix="Recebedor: " :bold="true" />
<mad-doc-variable-field :value="now()" format="datetime" prefix="Data/hora: " />
<mad-doc-text align="justify" color="#475569">
    Confirmo o recebimento da mercadoria descrita no pedido abaixo, em perfeito estado.
</mad-doc-text>
<table style="width:100%;border-collapse:collapse;margin-top:12pt;">
    <tr>
        <td style="width:60%;vertical-align:top;">
            <mad-doc-signature :width-mm="70" align="left" name="Ana Souza" role="Recebedor" />
        </td>
        <td style="width:40%;vertical-align:top;text-align:center;">
            <mad-doc-qrcode data="PEDIDO:4821" :size-mm="26" ec-level="M" align="center" />
        </td>
    </tr>
</table>

Ver PDF

← AnteriorTabelas em PDF

Código-fonte completo da página

app/control/Tutor/TutorPdfAvancado.php

<?php

namespace App\Control\Tutor;

use App\Support\Tutor\TutorPage;
use Mad\Doc\MadDocPdf;
use Mad\Service\MadUploadStorage;
use Mad\View\MadBlade;

/**
 * TutorPdfAvancado — recursos avançados: mad-doc-header-band, mad-doc-footer-band,
 * mad-doc-signature, mad-doc-qrcode, mad-doc-page-number, mad-doc-variable-field.
 *
 * header-band/footer-band usam position:fixed — ao vivo isso prenderia a
 * faixa na JANELA do navegador (mesmo CSS, "página" diferente), sobrepondo o
 * resto da tela do Tutor. Por isso, só para o exemplo "cabecalho-rodape", o
 * parcial ao vivo (sem sufixo -doc) é um MOCKUP estático — o -doc.blade.php
 * usa os componentes de verdade, exclusivo do pipeline de PDF. Os demais
 * componentes desta página (signature/qrcode/variable-field) não têm esse
 * problema e são compartilhados normalmente entre preview e PDF.
 */
class TutorPdfAvancado extends TutorPage
{
    protected string $catalogKey = 'pdf_avancado';

    private const EXEMPLOS = ['cabecalho-rodape', 'assinatura-codigos'];

    /** exemplo => URL assinada do PDF já gerado (mad.download). */
    public array $pdfUrls = [];

    public function mount(array $params = []): void
    {
        foreach (self::EXEMPLOS as $exemplo) {
            $this->pdfUrls[$exemplo] = $this->gerarPdf($exemplo);
        }
    }

    private function gerarPdf(string $exemplo): string
    {
        $html = MadBlade::render('tutor.examples.pdf-avancado.' . $exemplo . '-doc');
        $pdf  = MadDocPdf::fromHtml($html);

        $path = 'tutor-pdf/pdf-avancado/' . $exemplo . '.pdf';
        MadUploadStorage::putContent($path, $pdf);

        return mad_download_url($path);
    }
}

resources/views/tutor/pdf/avancado.blade.php

<x-tutor-page page="pdf_avancado">
    <x-tutor-demo demo="tutor.examples.pdf-avancado.cabecalho-rodape"
        title="Cabeçalho e rodapé fixos" desc="mad-doc-header-band + mad-doc-footer-band + mad-doc-page-number (preview em mockup — veja o comentário no código)." />
    <div style="margin:8px 0 24px;">
        <mad-btn variant="primary" icon="file-text" :href="$pdfUrls['cabecalho-rodape']"
            attrs='target="_blank" rel="noopener"'>Ver PDF</mad-btn>
    </div>

    <x-tutor-demo demo="tutor.examples.pdf-avancado.assinatura-codigos"
        title="Assinatura e QR code" desc="mad-doc-signature + mad-doc-qrcode + mad-doc-variable-field num termo de recebimento." />
    <div style="margin:8px 0 24px;">
        <mad-btn variant="primary" icon="file-text" :href="$pdfUrls['assinatura-codigos']"
            attrs='target="_blank" rel="noopener"'>Ver PDF</mad-btn>
    </div>
</x-tutor-page>

Recursos avançados de PDF