Cómo generar y editar archivos PDF con JavaScript: Guía completa, bibliotecas y ejemplos prácticos

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción: ¿Por qué necesitamos manejar PDFs en JavaScript?

La importancia del procesamiento de PDF y el papel de JavaScript

En los últimos años, el PDF se ha convertido en un formato de archivo indispensable tanto en entornos empresariales como personales. Contratos, recibos, facturas e informes se crean ahora habitualmente en formato PDF. Como consecuencia, la necesidad de automatizar la creación y edición de archivos PDF ha aumentado en muchos entornos de desarrollo.
JavaScript se ejecuta directamente en el navegador y sobresale en operaciones dinámicas del lado del cliente. Aprovechar estas capacidades permite generar y editar archivos PDF de manera eficiente. En particular, la posibilidad de procesar PDFs completamente en el cliente —sin involucrar un servidor— ha cobrado una atención significativa.

Beneficios de usar JavaScript para el procesamiento de PDF

1. Reducción de la carga del servidor

Tradicionalmente, la generación y edición de PDFs se manejaba del lado del servidor. Sin embargo, al usar JavaScript, el procesamiento puede completarse en el cliente, reduciendo considerablemente la carga sobre los servidores.

2. Procesamiento en tiempo real

Con JavaScript, la entrada del usuario puede reflejarse inmediatamente en un PDF. Por ejemplo, los datos de un formulario pueden convertirse al instante en un PDF y ofrecerse como enlace de descarga.

3. Alta flexibilidad y personalización

Al utilizar bibliotecas de JavaScript, puedes crear PDFs altamente personalizables con gráficos, imágenes o texto con formato. Como JavaScript funciona en la mayoría de los navegadores modernos, también se minimizan los problemas específicos de cada entorno.

Casos de uso prácticos

1. Generación de documentos empresariales

Se puede usar para generar automáticamente facturas y recibos, que luego pueden enviarse por correo electrónico. También es posible producir al instante documentos personalizados para cada cliente, mejorando la eficiencia.

2. Exportación de datos de formularios

Puedes implementar funcionalidades que guarden encuestas o datos de formularios de solicitud como PDFs y los registren en un sistema de gestión. Esto ayuda a pasar de la gestión documental basada en papel a flujos de trabajo digitales.

3. Creación de informes y materiales de presentación

Los informes pueden generarse dinámicamente a partir de datos, incluyendo gráficos e imágenes. Esto reduce significativamente el tiempo necesario para preparar materiales para reuniones o presentaciones.

Tendencias futuras y perspectivas

Se espera que el procesamiento de PDF basado en JavaScript continúe evolucionando. Dos tendencias principales están llamando la atención:

1. Integración más profunda con la nube
   La integración fluida con almacenamiento en la nube o bases de datos incrementará la demanda de aplicaciones web con creación y edición de PDF incorporadas.

2. Mejora del soporte móvil
   A medida que la usabilidad en smartphones y tablets se vuelve más importante, la generación de PDF optimizada para diseños responsivos seguirá avanzando.

2. Las 5 principales bibliotecas JavaScript para PDF (con tabla comparativa)

La importancia de elegir la biblioteca JavaScript adecuada para PDF

Seleccionar la biblioteca correcta es crucial al generar o editar PDFs con JavaScript. Una biblioteca bien elegida aumenta la eficiencia del desarrollo y permite una personalización avanzada, incluido el soporte de texto en japonés. Esta sección presenta cinco bibliotecas PDF principales y compara sus características y casos de uso.

1. PDF.js

Visión general

PDF.js es una biblioteca de visualización de PDF de código abierto desarrollada por Mozilla. Se especializa en renderizar PDFs dentro del navegador.

Características

• Solo visor: Se centra exclusivamente en la visualización; no soporta generación ni edición de PDF.
• Alta compatibilidad: Funciona únicamente con HTML5 y JavaScript, sin requerir complementos.
• Alto rendimiento: Renderizado rápido y manejo eficiente de documentos extensos.

Casos de uso

• Aplicaciones que requieren visualización de PDF, como libros electrónicos o contratos.

2. jsPDF

Visión general

jsPDF es una biblioteca ligera utilizada principalmente para generar archivos PDF. Permite la inserción sencilla de texto, imágenes y tablas, lo que la hace ideal para la creación de documentos simples.

Características

• Generación de PDF: Ideal para la creación de PDFs del lado del cliente.
• Extensible: Soporta complementos para funcionalidades adicionales.
• Soporte japonés: Disponible mediante configuración de fuentes.

Casos de Uso

• Generación automática de recibos, facturas o informes simples.

3. pdf-lib

Descripción general

pdf-lib no solo soporta la generación de PDF, sino también la edición y fusión. Es compatible con TypeScript e se integra de manera fluida en entornos de desarrollo modernos.

Características

• Capacidades de edición: Agregar texto o imágenes a PDFs existentes.
• Personalización flexible: Ofrece incrustación de fuentes y control de diseño.
• Alto rendimiento: Eficiente incluso para operaciones de PDF a gran escala.

Casos de Uso

• Crear formularios PDF o informes de datos dinámicos.

4. pdfmake

Descripción general

pdfmake permite especificar fácilmente el diseño mediante una API declarativa, lo que lo hace ideal para diseños complejos y diseños de tablas.

Características

• Fuertes capacidades de diseño: Configuración fácil de tablas y estilos.
• Soporte multilingüe: Soporta fuentes japonesas básicas.
• Basado en JSON: Fácil de construir documentos dinámicos.

Casos de Uso

• Informes, catálogos y documentos que contienen tablas.

5. html2pdf

Descripción general

html2pdf convierte elementos HTML directamente en archivos PDF. Es ideal para generar PDFs basados en diseños de páginas web existentes.

Características

• Basado en HTML: Mantiene el diseño HTML/CSS en la salida PDF.
• Fácil de usar: Configuración rápida para salida simple.
• Compatible con responsivo: Mantiene el diseño en dispositivos móviles.

Casos de Uso

• Funciones de impresión para páginas web o salida PDF de diseño fijo.

6. Tabla de Comparación

Resumen

Cada biblioteca de PDF de JavaScript tiene diferentes fortalezas:

• PDF.js: Mejor para solo visualización.
• jsPDF: Mejor para generación simple de PDF.
• pdf-lib: Ideal para edición o agregar características complejas.
• pdfmake: Fuerte en diseño de tablas y diseño personalizado.
• html2pdf: Mejor cuando quieres preservar el diseño HTML.

3. Ejemplos de Implementación: Generación y Edición de PDFs con JavaScript

Introducción

JavaScript permite una generación y edición fácil de PDF del lado del cliente. Esta sección introduce implementaciones concretas usando bibliotecas principales. Prueba ejecutar estas muestras de código para entender cómo funcionan.

1. Generación Básica de PDF con jsPDF

Creación de un PDF de Texto Simple

const doc = new jsPDF();
doc.text("Hello, PDF!", 10, 10);
doc.save("sample.pdf");

Puntos Clave

1. Crear una instancia:

• new jsPDF() crea un nuevo documento PDF.

1. Agregar texto:

• doc.text() coloca “Hello, PDF!” en la coordenada (10, 10).

1. Guardar PDF:

• doc.save() descarga el PDF como “sample.pdf”.

Ejemplo: Agregar una Imagen

const doc = new jsPDF();
const imgData = 'data:image/jpeg;base64,...';
doc.addImage(imgData, 'JPEG', 10, 40, 180, 160);
doc.save("image-sample.pdf");

2. Edición de PDFs con pdf-lib

Agregar Texto a un PDF Existente

import { PDFDocument } from 'pdf-lib';

async function modifyPDF() {
  const url = 'sample.pdf';
  const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(existingPdfBytes);
  const pages = pdfDoc.getPages();
  const firstPage = pages[0];

  firstPage.drawText('追加されたテキスト', { x: 50, y: 500, size: 20 });

  const pdfBytes = await pdfDoc.save();
  download(pdfBytes, "modified-sample.pdf", "application/pdf");
}

Puntos Clave

1. Cargar PDF:

• Usar PDFDocument.load() .

1. Editar PDF:

• drawText() agrega texto en la ubicación especificada.

1. Guardar y descargar:

• Guardar el PDF editado y descargarlo.

3. Creación de PDFs con Diseños Intensivos con pdfmake

Creación de Diseños Complejos

const docDefinition = {
  content: [
    { text: 'レポートタイトル', style: 'header' },
    { text: '以下はサンプル表です。' },
    {
      table: {
        body: [
          ['項目1', '項目2', '項目3'],
          ['データ1', 'データ2', 'データ3'],
          ['データ4', 'データ5', 'データ6'],
        ],
      },
    },
  ],
  styles: {
    header: {
      fontSize: 18,
      bold: true,
      margin: [0, 0, 0, 10],
    },
  },
};
pdfMake.createPdf(docDefinition).download('sample-table.pdf');

Puntos clave

1. Definir contenido: Las tablas y el texto se definen en content .
2. Definición de estilo: styles controla la fuente y la configuración de diseño.
3. Descargar: Usa download() para generar el PDF.

4. Soporte de fuentes japonesas (jsPDF)

const doc = new jsPDF();
doc.addFileToVFS('NotoSansJP-Regular.ttf', fontData);
doc.addFont('NotoSansJP-Regular.ttf', 'NotoSansJP', 'normal');
doc.setFont('NotoSansJP');
doc.text('日本語対応テスト', 10, 10);
doc.save("japanese-sample.pdf");

Resumen

Esta sección introdujo ejemplos prácticos usando bibliotecas principales:

• jsPDF: Creación sencilla de PDF e inserción de imágenes.
• pdf-lib: Edición de PDFs existentes y manipulación de páginas.
• pdfmake: Personalización robusta de tablas y diseños, con soporte parcial de japonés.

4. Manejo de fuentes japonesas y solución de problemas

Introducción

Al generar PDFs en JavaScript, el manejo de fuentes japonesas es uno de los desafíos más comunes. Con frecuencia aparecen problemas como caracteres ilegibles o glifos faltantes. Esta sección explica cómo configurar correctamente las fuentes japonesas y cómo solucionar problemas habituales.

1. Problemas comunes con fuentes japonesas

Por qué es necesario incrustar fuentes

Los PDFs basados en inglés suelen mostrarse correctamente con fuentes predeterminadas, pero el japonés requiere un manejo especial porque:

• Las fuentes japonesas incluyen muchos caracteres que no están disponibles en las fuentes predeterminadas.
• Algunas bibliotecas tienen soporte limitado para fuentes japonesas.
• Sin incrustar fuentes, los PDFs pueden mostrarse incorrectamente según el entorno.

Errores comunes

• Caracteres corruptos: Aparecen como □ o ? debido a la falta de soporte de fuente.
• Diseño roto: Espaciado de línea o tamaño de fuente incorrectos.
• Errores al cargar la fuente: No se puede cargar el archivo de fuente personalizado.

2. Manejo de fuentes japonesas en jsPDF

Preparación de archivos de fuente

Para incrustar fuentes japonesas, necesitas una fuente TrueType (.ttf). Ejemplo: Noto Sans JP.

1. Descargar: Obtén Noto Sans JP de Google Fonts.
2. Convertir a Base64: Convierte el archivo de fuente a una cadena Base64.

Código de ejemplo

const doc = new jsPDF();
doc.addFileToVFS('NotoSansJP-Regular.ttf', fontData);
doc.addFont('NotoSansJP-Regular.ttf', 'NotoSansJP', 'normal');
doc.setFont('NotoSansJP');
doc.text('こんにちは、世界！', 10, 10);
doc.save('japanese-sample.pdf');

Explicación

• addFileToVFS: Registra los datos de la fuente en Base64.
• addFont: Define el nombre y estilo de la fuente.
• setFont: Aplica la fuente.

3. Manejo de fuentes japonesas en pdfmake

Preparación y configuración de fuentes

var fonts = {
  Roboto: {
    normal: 'Roboto-Regular.ttf',
    bold: 'Roboto-Bold.ttf',
    italics: 'Roboto-Italic.ttf',
    bolditalics: 'Roboto-BoldItalic.ttf',
  },
};

var docDefinition = {
  content: [
    { text: '日本語テスト', font: 'Roboto', fontSize: 14 },
    { text: 'Hello, World!', fontSize: 12 },
  ],
};

pdfMake.createPdf(docDefinition).download('japanese-sample.pdf');

Explicación

• Cada estilo de fuente debe configurarse por separado.
• La propiedad font se usa para especificar las fuentes en el contenido.

4. Solución de problemas

Texto que no se muestra correctamente

• Posible causa: Archivo de fuente o conversión a Base64 incorrecta.
• Soluciones:

1. Confirmar la incrustación en Base64.
2. Verificar la integridad del archivo .ttf.
3. Asegurarse de que el tipo MIME sea correcto.

Diseño roto

• Causa: Espaciado de línea incorrecto.
• Solución: Definir manualmente fontSize y lineHeight.

Problemas de codificación en dispositivos móviles

• Causa: El dispositivo no tiene fuentes japonesas.
• Solución: Siempre incrustar las fuentes.

Resumen

• jsPDF: Incrustación sencilla de fuentes mediante Base64.
• pdfmake: Control robusto del diseño, pero requiere una configuración detallada de fuentes.

5. Técnicas avanzadas y soluciones para casos de uso

Introducción

Las bibliotecas PDF en JavaScript pueden soportar casos de uso avanzados como generación dinámica de PDFs, integración con bases de datos, diseños personalizados y más.

1. Generación de PDFs con datos dinámicos

Generar informes a partir de JSON

const doc = new jsPDF();
const data = [
  { 名前: "山田太郎", 年齢: 30, 職業: "エンジニア" },
  { 名前: "佐藤花子", 年齢: 25, 職業: "デザイナー" },
  { 名前: "田中一郎", 年齢: 40, 職業: "マネージャー" },
];
doc.text('ユーザーレポート', 10, 10);
doc.autoTable({
  head: [['名前', '年齢', '職業']],
  body: data.map(item => [item.名前, item.年齢, item.職業]),
});
doc.save('report.pdf');

Puntos clave

• Datos dinámicos: Convertir JSON en filas de tabla.
• Gestión de diseño: Usar el plugin autoTable para crear tablas fácilmente.

2. Combinar y dividir PDFs

Combinar varios PDFs (pdf-lib)

import { PDFDocument } from 'pdf-lib';

async function mergePDFs(pdfUrls) {
  const mergedPdf = await PDFDocument.create();

  for (let url of pdfUrls) {
    const existingPdf = await fetch(url).then(res => res.arrayBuffer());
    const pdfDoc = await PDFDocument.load(existingPdf);
    const copiedPages = await mergedPdf.copyPages(pdfDoc, pdfDoc.getPageIndices());
    copiedPages.forEach(page => mergedPdf.addPage(page));
  }

  const pdfBytes = await mergedPdf.save();
  download(pdfBytes, "merged.pdf", "application/pdf");
}

Puntos clave

• Copiar páginas de varios PDFs.
• Combinar en un solo documento.

3. Campos de formulario PDF

Crear campos de entrada (pdf-lib)

import { PDFDocument } from 'pdf-lib';

async function createForm() {
  const pdfDoc = await PDFDocument.create();
  const page = pdfDoc.addPage([500, 700]);

  const form = pdfDoc.getForm();
  const nameField = form.createTextField('name');
  nameField.setText('名前を入力してください');
  nameField.addToPage(page, { x: 50, y: 600, width: 300, height: 30 });

  const pdfBytes = await pdfDoc.save();
  download(pdfBytes, "form.pdf", "application/pdf");
}

Puntos clave

• Soporta entrada dinámica del usuario.
• Los datos del campo pueden usarse para procesamiento posterior.

4. Diseños personalizados

Encabezado y pie de página (pdfmake)

const docDefinition = {
  header: { text: 'レポートヘッダー', alignment: 'center', margin: [0, 10, 0, 0] },
  footer: function(currentPage, pageCount) {
    return { text: `${currentPage} / ${pageCount}`, alignment: 'right', margin: [0, 0, 10, 0] };
  },
  content: [
    { text: 'レポート本文', fontSize: 12 },
  ],
};
pdfMake.createPdf(docDefinition).download('custom-layout.pdf');

5. Soporte móvil y responsivo

Generar PDF desde HTML (html2pdf)

const element = document.getElementById('content');
html2pdf(element);

Resumen

Técnicas avanzadas clave:

• Datos dinámicos: Construir PDFs a partir de JSON.
• Combinar/editar: Usar pdf‑lib para edición avanzada.
• Campos de formulario: Crear documentos interactivos.
• Diseño personalizado: Usar pdfmake para documentos con diseños ricos.

6. Preguntas frecuentes (FAQ)

Introducción

Esta sección responde a preguntas comunes que los desarrolladores encuentran al generar o editar PDFs en JavaScript.

1. Operaciones básicas

P1. ¿Qué biblioteca es la mejor para generar PDFs en JavaScript?

R: Elija según sus necesidades:

• Generación simple de PDF: jsPDF
• Edición y combinación: pdf‑lib
• Diseños complejos: pdfmake
• HTML a PDF: html2pdf

P2. ¿Cómo mostrar texto japonés correctamente?

R: Siga estos pasos:

1. Preparar una fuente japonesa (Noto Sans JP, IPA, etc.)
2. Convertir la fuente a Base64
3. Incrustarla usando addFileToVFS() y addFont()
4. Seleccionarla usando setFont()

P3. ¿Por qué el texto japonés se rompe en dispositivos móviles?

R: Los dispositivos móviles carecen de fuentes japonesas.
Solución: Siempre incruste fuentes japonesas.

P4. ¿Cómo agregar un campo de firma?

R: Puede insertar una imagen de firma usando pdf‑lib:

page.drawImage(imgData, {
  x: 50,
  y: 100,
  width: 200,
  height: 100,
});

2. Uso avanzado

P5. ¿Puedo insertar códigos QR dinámicos en PDFs?

R: Sí, usando jsPDF.

P6. ¿Puedo exportar formularios HTML a PDF?

R: Sí, con html2pdf.

Resumen

Este FAQ debería ayudarle a solucionar problemas y optimizar su flujo de trabajo de PDFs en JavaScript.

7. Conclusión

Introducción

Este artículo ofrece una explicación detallada sobre cómo generar y editar PDFs usando JavaScript, abarcando operaciones básicas, técnicas avanzadas, comparaciones de bibliotecas y el manejo de fuentes japonesas.

1. Conveniencia y flexibilidad de las operaciones PDF basadas en JavaScript

JavaScript se ejecuta del lado del cliente, lo que permite la generación y edición de PDFs en tiempo real. Esto reduce la carga del servidor y soporta funcionalidades interactivas.

Beneficios:

• Reducción de la dependencia del servidor
• Interacción y vista previa en tiempo real
• Alta compatibilidad con navegadores modernos

2. Resumen de la selección de bibliotecas

3. Resumen de ejemplos de implementación

• Creación básica de PDF
• Informes con datos dinámicos
• Edición de PDFs existentes
• Manejo de fuentes japonesas
• Control de diseño y maquetación personalizados

4. Perspectivas futuras

El ecosistema de PDFs en JavaScript seguirá evolucionando:

1. Mejor integración con la nube
2. Generación de documentos asistida por IA
3. Nuevas bibliotecas para mayor velocidad y escalabilidad

Conclusión

JavaScript se está volviendo cada vez más esencial para el procesamiento de PDFs en aplicaciones web y sistemas empresariales. Al aprovechar las bibliotecas y técnicas descritas en este artículo, podrás implementar soluciones PDF flexibles y de alta calidad con facilidad.