The Digital Mike

Tienen dudas de sobre como integrar las librerías jsPDF y html2Canvas a un proyecto? Aquí te dejo como agregar las librerías a tu projecto, usando diversas formas para que así elijas la mas apropiada para ti.

1. Usar las librerías usando CDNs

Usar las librerías jsPDF y html2canvas mediante CDNs es algo básico que puedes usar en tus projectos mientras lo desarrollas. De esta manera, usando siempre la ultima version de estas, podrás mantenerte actualizado hasta el momento en el que, debes cambiar a la etapa de prueba.

Para llamar a las librerías desde un cdn, primero debes tener a tu disposición el sitio desde donde solicitarla. Luego es solo cuestión de copiar y agregar la librería a tu sitio.

jsPDF

Para esta librería vamos a ir su pagina en GitHub: https://artskydj.github.io/jsPDF/docs/index.html. Aquí vamos a usar la primera opción, la cual es la forma mas fácil, usando el CDN. Copiamos el código html y lo pegamos en nuestro proyecto.

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

html2canvas

Para esta librería, usaremos las mismas instrucciones que lo anterior. Iremos a la pagina oficial de HTML2Canvas: https://html2canvas.hertzen.com/, luego selecciona cualquiera de los dos botones «html2canvas.js» o la opción minimalista «html2canvas.min.js«. El fichero se abrirá en una nueva ventana del navegador. Copia y pega la dirección URL en una etiqueta de «script» dentro del proyecto.

<!-- HTML2Canvas -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

2. Usar las librerías de forma local

Para usar las librerias de forma local, debemos descargarlas. Para la opcion de jspdf, copia la propia direccion url usada en el paso anterior y salvalo en tu pc. O si deseas ir mas rapido, aqui tejo el link: https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js. Para la opcion de html2canvas, solo elije cualquiera de las dos alternativas que tienen en el sitio y guardalo en la pc. Una vez descargardas, pueden llamarla directamente en las etiquetas «script«.

<!-- jsPDF libreria -->
<script src="jspdf.debug.js"></script>
<!-- HTML2Canvas -->
<script src="html2canvas.js"></script>

3. Instalar las librerías usando npm o yarn

Para usar esta forma, deben de tener un proyecto usando Nodejs. Luego de instalar tu proyecto, navega hasta el directorio raiz de tu proyecto y usa las opciones npm o npx, o en su lugar si usas yarn, tambien puedes instalarla de esa forma. Ejemplos

Para instalar la libreria jsPDF

Usando npm:

npm install jspdf --save

Usando yarn:

yarn add jspdf

Configuracion

Para configurar la libreria, pueden usar una de estas formas para comenzar a usarlas.

import * as jsPDF from 'jspdf'

import jsPDF from 'jspdf';

Para instalar la libreria html2canvas

Usando npm:

npm install --save html2canvas

Usando yarn:

yarn add html2canvas

Una vez instalada la librería, agrégala de esta forma:

import html2canvas from 'html2canvas';

Hasta aqui todo y espero que les guste.