1. Productos
  2.   PDF
  3.   JavaScript
  4.   JSPDF
 
  

Genere PDF a través de la API de JavaScript de código abierto

Biblioteca JavaScript de código abierto para crear y convertir archivos PDF, agregar gráficos y texto a PDF a través de JavaScript.

JSPDF es una solución del lado del cliente HTML5 de código abierto para la creación y gestión de documentos PDF. Admite excelentes funciones como informes, certificados, emisión de boletos y mucho más. Como PDF es muy popular en la web y casi todas las empresas lo utilizan para compartir documentos e informes. Al usar solo un par de comandos, puede acceder y reutilizar todas las excelentes funciones dentro de su propia aplicación. 

Lo mejor de la biblioteca JsPDF es que genera un archivo PDF cuando los usuarios hacen clic en el botón de descarga. Ha incluido soporte para varias funciones destacadas, como generar documentos PDF, dibujar formas e insertar imágenes en archivos PDF, agregar páginas a PDF, agregar y mostrar texto, exportar mapas como PDF, convertir HTML a PDF y muchas más.

Previous Next

Primeros pasos con JsPDF

La forma recomendada y más fácil de comenzar es colocar la biblioteca alojada de CDN en su página, a continuación se encuentra el comando.

utilizar el código de instalación

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

Generación de documentos PDF a través de la biblioteca de JavaScript

JsPDF ofrece la funcionalidad para la generación de documentos PDF, así como modificaciones dentro de las aplicaciones de JavaScript. Puede generar fácilmente documentos PDF y agregarle una nueva página. Puede definir la orientación del documento, las unidades y el formato de página predeterminado mientras crea el nuevo documento. Una vez que se genera el PDF, puede agregar fácilmente nuevas páginas, insertar imágenes, etc. con facilidad.

Crear documentos PDF a través de JavaScript

 import { jsPDF } from "jspdf";
  // Default export is a4 paper, portrait, using millimeters for units
  const doc = new jsPDF();
  doc.text("Hello world!", 10, 10);
  doc.save("a4.pdf");

Insertar texto en documentos PDF a través de JavaScript

La API JsPDF facilita a los desarrolladores de JavaScript agregar y mostrar texto dentro de un documento PDF. Para dibujar el texto, debe definir el nombre de la fuente. Podemos elegir entre las fuentes disponibles. También es posible cambiar la familia de fuentes y el estilo de fuente. Después de eso, podemos definir el tamaño de fuente, el color del texto y más.

Agregar texto a PDF existente usando JavaScript

  //Add Text to Existing PDF 
  var doc = new jsPDF();
  doc.addHTML(document.body, function() {
  doc.text(20, 20, 'Hello world!');
  doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
  doc.addPage();
  doc.text(20, 20, 'Do you like that?');
  printData();
  });
  printData = function() {
  var str = doc.output('datauristring');
  console.log(str);
  // window.open(str); Optional
  }

Adición de gráficos a documentos PDF a través de JavaScript

La biblioteca JsPDF permite a los profesionales de JavaScript dibujar gráficos dentro de documentos PDF. Los gráficos siempre agregan más valor a la pieza de contenido. Primero, tenemos que establecer los colores de relleno y trazo de las formas dibujadas. También podemos establecer el ancho del trazo. Cada función de dibujo de forma toma las coordenadas del punto central como dos primeros parámetros (excepto el triángulo). También toman el estilo de dibujo del último parámetro. Podemos dibujar una elipse, pasando dos radios o un círculo, pasando solo un radio, un triángulo, pasando las coordenadas de cada esquina y más.

Agregar imagen a PDF usando JavaScript

  // Add image to PDF
  var img = new Image()
  img.src = 'assets/sample.png'
  pdf.addImage(img, 'png', 10, 78, 12, 15)
 Español