Documentación Herramientas principales Markdown To Pdf

Referencia de API

Este documento proporciona detalles técnicos sobre la API interna del convertidor Markdown a PDF y las posibilidades de integración.

Descripción general

The Markdown to PDF converter is built using modern web technologies and provides a robust API for document processing and PDF generation.

Tecnologías principales

Framework frontend

Vue.js 3: Reactive frontend framework
TypeScript: Type-safe development
Composition API: Modern Vue.js patterns

Generación de PDF

marked.js: Markdown parsing and rendering

Estilo e interfaz

TailwindCSS: Utility-first CSS framework
Lucide Icons: Modern icon library
Vue Sonner: Toast notifications

Estructura de API interna

Procesamiento Markdown

`parseMarkdown(content: string): string`

Convierte contenido Markdown a HTML.

Parámetros:

content (string): Raw Contenido Markdown

Devuelve:

string: Rendered HTML

Ejemplo:

const html = parseMarkdown("# Hello World\nThis is **bold** text.");
// Returns: '<h1>Hello World</h1>\n<p>This is <strong>bold</strong> text.</p>'

`validateMarkdown(content: string): boolean`

Valida el contenido Markdown en busca de posibles problemas.

Parámetros:

content (string): Contenido Markdown to validate

Devuelve:

boolean: True if content is valid

Ejemplo:

const isValid = validateMarkdown("# Valid Header\nValid content.");
// Returns: true

Generación de PDF

`generatePDF(options: PDFOptions): Promise<Blob>`

Genera un PDF a partir de contenido HTML.

Parámetros:

options (PDFOptions): Opciones de generación PDF

PDFOptions Interface:

interface PDFOptions {
  content: string; // HTML content
  pageSize: "A4" | "A3" | "Letter" | "Legal";
  orientation: "portrait" | "landscape";
  marginTop: number; // in mm
  marginBottom: number; // in mm
  marginLeft: number; // in mm
  marginRight: number; // in mm
  includeToc: boolean;
  includePageNumbers: boolean;
}

Devuelve:

Promise<Blob>: PDF generado como Blob

Ejemplo:

const options = {
  content: "<h1>Document</h1><p>Content</p>",
  pageSize: "A4",
  orientation: "portrait",
  marginTop: 20,
  marginBottom: 20,
  marginLeft: 20,
  marginRight: 20,
  includeToc: true,
  includePageNumbers: true,
};

const pdfBlob = await generatePDF(options);

`downloadPDF(blob: Blob, filename?: string): void`

Descarga un blob PDF como archivo.

Parámetros:

blob (Blob): Blob PDF a descargar
filename (string, optional): Nombre de archivo personalizado

Ejemplo:

downloadPDF(pdfBlob, "my-document.pdf");

Gestión del historial

`saveToHistory(record: HistoryRecord): void`

Guarda un registro de conversión en el historial.

HistoryRecord Interface:

interface HistoryRecord {
  id: string;
  title: string;
  content: string;
  contentLength: number;
  pdfOptions: PDFOptions;
  timestamp: number;
}

Ejemplo:

const record = {
  id: Date.now().toString(),
  title: "My Document",
  content: "# My Document\nContent here...",
  contentLength: 25,
  pdfOptions: options,
  timestamp: Date.now(),
};

saveToHistory(record);

`loadFromHistory(id: string): HistoryRecord | null`

Carga un registro del historial por ID.

Parámetros:

id (string): ID del registro de historial

Devuelve:

HistoryRecord | null: Registro de historial o null si no se encuentra

`clearHistory(): void`

Borra todos los registros del historial.

`deleteHistoryRecord(id: string): void`

Elimina un registro específico del historial.

Parámetros:

id (string): ID del registro de historial a eliminar

API de componentes

Componente MarkdownToPDF

Props

interface Props {
  id: string; // ID del componente
  docHref?: string; // Enlace de documentación
  class?: string; // Clases CSS
}

Events

interface Events {
  "pdf-generated": (blob: Blob) => void;
  "history-saved": (record: HistoryRecord) => void;
  error: (error: Error) => void;
}

Methods

interface Methods {
  generatePDF(): Promise<void>;
  clearContent(): void;
  loadExample(): void;
  downloadPDF(): void;
}

Datos reactivos

`markdownContent: Ref<string>`

Referencia reactiva al contenido Markdown actual.

`renderedHtml: Ref<string>`

Referencia reactiva al HTML renderizado.

`pdfOptions: Ref<PDFOptions>`

Referencia reactiva a las opciones de generación PDF.

`isGenerating: Ref<boolean>`

Referencia reactiva al estado de generación PDF.

`pdfBlob: Ref<Blob | null>`

Referencia reactiva al blob PDF generado.

Funciones de utilidad

Procesamiento de contenido

`extractTitle(content: string): string`

Extrae el primer encabezado del contenido Markdown como título del documento.

Parámetros:

content (string): Contenido Markdown

Devuelve:

string: Título extraído o título predeterminado

Ejemplo:

const title = extractTitle("# My Document\nContent...");
// Returns: 'My Document'

`formatDate(timestamp: number): string`

Formatea una marca de tiempo en una cadena de fecha legible.

Parámetros:

timestamp (number): Marca de tiempo Unix

Devuelve:

string: Cadena de fecha formateada

Ejemplo:

const date = formatDate(Date.now());
// Returns: '2024-01-15 14:30:25'

Funciones de validación

`validatePDFOptions(options: PDFOptions): boolean`

Valida las opciones de generación PDF.

Parámetros:

options (PDFOptions): Opciones a validar

Devuelve:

boolean: True si las opciones son válidas

`sanitizeContent(content: string): string`

Sanitiza el contenido para prevenir ataques XSS.

Parámetros:

content (string): Contenido a sanitizar

Devuelve:

string: Contenido sanitizado

Manejo de errores

Tipos de error

`PDFGenerationError`

Se lanza cuando falla la generación del PDF.

class PDFGenerationError extends Error {
  constructor(message: string, cause?: Error) {
    super(message);
    this.name = "PDFGenerationError";
    this.cause = cause;
  }
}

`ValidationError`

Se lanza cuando falla la validación del contenido.

class ValidationError extends Error {
  constructor(message: string, field?: string) {
    super(message);
    this.name = "ValidationError";
    this.field = field;
  }
}

Patrones de manejo de errores

try {
  const pdfBlob = await generatePDF(options);
  downloadPDF(pdfBlob);
} catch (error) {
  if (error instanceof PDFGenerationError) {
    console.error("PDF generation failed:", error.message);
    // Handle PDF generation error
  } else if (error instanceof ValidationError) {
    console.error("Validation failed:", error.message);
    // Handle validation error
  } else {
    console.error("Unexpected error:", error);
    // Handle unexpected error
  }
}

Consideraciones de rendimiento

Gestión de memoria

Blob Cleanup: Los blobs PDF se limpian automáticamente
DOM Cleanup: Los elementos DOM temporales se eliminan
Event Listeners: Los event listeners se limpian correctamente

Estrategias de optimización

Lazy Loading: Los recursos se cargan solo cuando se necesitan
Debouncing: Los cambios de entrada se debouncean para evitar procesamiento excesivo
Caching: El contenido renderizado se cachea para rendimiento
Background Processing: La generación PDF ocurre en segundo plano

Compatibilidad del navegador

Navegadores compatibles

Chrome: 80+
Firefox: 75+
Safari: 13+
Edge: 80+

Detección de funciones

// Check for required features
const hasRequiredFeatures = () => {
  return (
    "Blob" in window &&
    "URL" in window &&
    "createObjectURL" in URL &&
    "download" in document.createElement("a")
  );
};

Ejemplos de integración

Integración básica

import { generatePDF, downloadPDF } from "@/utils/pdf-generator";

const convertMarkdownToPDF = async (markdownContent, options) => {
  try {
    const html = parseMarkdown(markdownContent);
    const pdfBlob = await generatePDF({ ...options, content: html });
    downloadPDF(pdfBlob, "document.pdf");
  } catch (error) {
    console.error("Conversion failed:", error);
  }
};

Integración avanzada con historial

import { generatePDF, saveToHistory, loadFromHistory } from "@/utils/pdf-generator";

const convertWithHistory = async (content, options) => {
  const record = {
    id: Date.now().toString(),
    title: extractTitle(content),
    content,
    contentLength: content.length,
    pdfOptions: options,
    timestamp: Date.now(),
  };

  const pdfBlob = await generatePDF({ ...options, content });
  saveToHistory(record);

  return pdfBlob;
};

Mejoras futuras de la API

Funciones planificadas

Batch Processing: Convertir múltiples documentos
Template System: Plantillas de formato predefinidas
Custom Fonts: Soporte para incrustación de fuentes personalizadas
Watermarks: Añadir marcas de agua a PDFs generados
Digital Signatures: Añadir soporte de firma digital

Versionado de API

Las versiones futuras de la API mantendrán compatibilidad hacia atrás mientras añaden nuevas funciones. La información de versión estará disponible a través de la API.

Para más ejemplos y uso avanzado, consulta la documentación de Ejemplos.

¿Te resultó útil esta página?

On this page

Descripción general Tecnologías principales Estructura de API interna API de componentes Funciones de utilidad Manejo de errores Consideraciones de rendimiento Compatibilidad del navegador Ejemplos de integración Mejoras futuras de la API