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.
Si están usando Webpack, Angular, React, lo puedes usar así:
import * as jsPDF from 'jspdf'
En algunos frameworks, tienen que importar jsPDF de esta forma:
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.