Ejemplos

Upload form with progress bar

upload.component.ts

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 large with page range

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));

Combine it with pdfIndex to know what range to order without downloading the entire PDF client-side.

PDF explorer for RAG (index + section selection)

pdf-explorer.component.ts

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));
  }
}

This flow avoids converting the entire PDF when the user only wants to navigate a section. See PDF Index for AI agents.

Convert multiple files with `forkJoin`

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`);
    });
  });
}

Reactive form with size vavalidation before upload

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;
  }],
});

Vavalidating the size in the client before uploading avoids spending API quota on documents that will return 413 anyway. See Limits.

Python

Node.js / TypeScript

C++

Next.js

Angular

React

React Native

Svelte

Bun

Flutter

Java

Kotlin

Ejemplos

Ejemplos

Upload form with progress bar

PDF large with page range

PDF explorer for RAG (index + section selection)

Convert multiple files with `forkJoin`

Reactive form with size vavalidation before upload

​Ejemplos

​Upload form with progress bar

​PDF large with page range

​PDF explorer for RAG (index + section selection)

​Convert multiple files with forkJoin

​Reactive form with size vavalidation before upload

Ejemplos

Upload form with progress bar

PDF large with page range

PDF explorer for RAG (index + section selection)

Convert multiple files with `forkJoin`

Reactive form with size vavalidation before upload