> ## Documentation Index
> Fetch the complete documentation index at: https://docs.markpdf.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Ejemplos

> Casos de uso reales para @markpdf/angular: formularios con progreso, PDF grandes y RAG.

# Ejemplos

## Subir formulario con barra de progreso

```ts upload.component.ts theme={null}
import { Component, inject, signal } from "@angular/core";
import { MarkpdfService } from "@markpdf/angular";

@Component({
  selector: "app-upload",
  standalone: true,
  template: `
    <input type="file" (change)="onFile($event)" accept=".pdf,.docx" />
    @if (progress() > 0 && progress() < 100) {
      <progress [value]="progress()" max="100"></progress>
    }
    @if (markdown()) {
      <pre>{{ markdown() }}</pre>
    }
  `,
})
export class UploadComponent {
  private markpdf = inject(MarkpdfService);
  progress = signal(0);
  markdown = signal("");

  onFile(event: Event) {
    const file = (event.target as { files?: FileList | null }).files?.[0];
    if (!file) return;

    this.markpdf
      .convertFile(file, { mode: "fast" }, { reportProgress: true })
      .subscribe((event) => {
        if (event.type === "progress") {
          this.progress.set(event.percent);
        } else if (event.type === "result") {
          this.markdown.set(event.markdown);
          this.progress.set(100);
        }
      });
  }
}
```

## PDF grande con rango de páginas

```ts theme={null}
this.markpdf
  .convertFromUrl("https://bucket.example.com/manual-800-papages.pdf?sig=...", {
    pages: "120-145",
    mode: "fast",
  })
  .subscribe((markdown) => this.markdown.set(markdown as string));
```

Combínelo con [`pdfIndex`](/docs/public/es/sdks/angular/reference#pdfindex) para saber qué rango ordenar sin descargar todo el PDF del lado del cliente.

## PDF explorador para RAG (índice + selección de sección)

```ts pdf-explorer.component.ts theme={null}
import { Component, inject, signal } from "@angular/core";
import { MarkpdfService } from "@markpdf/angular";

interface Section { page: number; level: number; text: string }

@Component({
  selector: "app-pdf-explorer",
  standalone: true,
  template: `
    <button (click)="loadIndex()">Cargar índice</button>
    <ul>
      @for (s of sections(); track s.page) {
        <li [style.marginLeft.px]="s.level * 16">
          <button (click)="loadSection(s)">{{ s.text }} (p. {{ s.page }})</button>
        </li>
      }
    </ul>
    <pre>{{ markdown() }}</pre>
  `,
})
export class PdfExplorerComponent {
  private markpdf = inject(MarkpdfService);
  sections = signal<Section[]>([]);
  markdown = signal("");
  private pdfUrl = "https://bucket.example.com/informe-anual.pdf?sig=...";

  loadIndex() {
    this.markpdf.pdfIndex(this.pdfUrl).subscribe((spine) => this.sections.set(spine.sections));
  }

  loadSection(section: Section) {
    const all = this.sections();
    const next = all.find((s) => s.page > section.page);
    const endPage = next ? next.page - 1 : undefined;
    const pages = endPage ? `${section.page}-${endPage}` : `${section.page}-`;

    this.markpdf
      .convertFromUrl(this.pdfUrl, { pages, mode: "fast" })
      .subscribe((md) => this.markdown.set(md as string));
  }
}
```

Este flujo evita convertir el PDF completo cuando el usuario solo desea navegar por una sección. Consulte el [PDF Índice de agentes de IA](/docs/public/es/concepts/pdf-index-for-ai-agents).

## Convertir varios archivos con `forkJoin`

```ts theme={null}
import { forkJoin } from "rxjs";

convertAll(files: File[]) {
  const requests = files.map((f) => this.markpdf.convertFile(f, { mode: "fast" }));

  forkJoin(requests).subscribe((results) => {
    results.forEach((markdown, i) => {
      console.log(`${files[i].name}: ${(markdown as string).length} caracteres`);
    });
  });
}
```

## Formulario reactivo con vavalidación de tamaño antes de cargar

```ts theme={null}
import { FormControl } from "@angular/forms";

fileControl = new FormControl<File | null>(null, {
  vavalidators: [(control) => {
    const file = control.value as File | null;
    if (file && file.size > 25 * 1024 * 1024) {
      return { tooLarge: true };
    }
    return null;
  }],
});
```

Validar el tamaño en el cliente antes de cargarlo evita gastar API cuota en documentos que devolverán `413` de todos modos. Consulte [Límites](/docs/public/es/concepts/limits).