jsPDF
v2.5.2
Una biblioteca para generar archivos PDF en JavaScript.
Puede encontrarme en Twitter: @MrRio o visitar el sitio web de mi empresa para obtener asesoramiento.
jsPDF ahora está comantenido por yWorks, los expertos en diagramación.
Recomendado: obtenga jsPDF de npm:
npm install jspdf --save
# or
yarn add jspdfAlternativamente, cárguelo desde una CDN:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js " > </ script >O obtenga siempre la última versión a través de unpkg
< script src =" https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js " > </ script > La carpeta dist de este paquete contiene diferentes tipos de archivos:
core-js , la variante umd es autónoma.Normalmente no es necesario especificar el archivo exacto en la declaración de importación. Las herramientas de compilación o Node encuentran automáticamente el archivo correcto, por lo que importar "jspdf" es suficiente.
Entonces estás listo para comenzar a hacer tu documento:
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" ) ;Si desea cambiar el tamaño, la orientación o las unidades del papel, puede hacer:
// Landscape export, 2×4 inches
const doc = new jsPDF ( {
orientation : "landscape" ,
unit : "in" ,
format : [ 4 , 2 ]
} ) ;
doc . text ( "Hello world!" , 1 , 1 ) ;
doc . save ( "two-by-four.pdf" ) ; const { jsPDF } = require ( "jspdf" ) ; // will automatically load the node version
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ; // will save the file in the current working directory require ( [ "jspdf" ] , ( { jsPDF } ) => {
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;
} ) ; const { jsPDF } = window . jspdf ;
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ; Algunas funciones de jsPDF requieren dependencias opcionales. Por ejemplo, el método html , que depende de html2canvas y, cuando se suministra con un documento HTML de cadena, dompurify . JsPDF los carga dinámicamente cuando es necesario (utilizando el formato de módulo respectivo, por ejemplo, importaciones dinámicas). Las herramientas de compilación como Webpack crearán automáticamente fragmentos separados para cada una de las dependencias opcionales. Si su aplicación no utiliza ninguna de las dependencias opcionales, puede evitar que Webpack genere fragmentos definiéndolos como dependencias externas:
// webpack.config.js
module . exports = {
// ...
externals : {
// only define the dependencies you are NOT using as externals!
canvg : "canvg" ,
html2canvas : "html2canvas" ,
dompurify : "dompurify"
}
} ; En los proyectos de Vue CLI , los elementos externos se pueden definir a través de las propiedades configureWebpack o chainWebpack del archivo vue.config.js (primero debe crearse en proyectos nuevos).
En proyectos de Angular , los elementos externos se pueden definir mediante creadores de paquetes web personalizados.
En los proyectos de React ( create-react-app ), los externos se pueden definir usando reaccionar-app-rewired o expulsando.
jsPDF se puede importar como cualquier otra biblioteca de terceros. Esto funciona con todos los principales kits de herramientas y marcos. jsPDF también ofrece un archivo de mecanografía para proyectos TypeScript.
import { jsPDF } from "jspdf" ;Puede agregar jsPDF a su proyecto meteor de la siguiente manera:
meteor add jspdf:core
jsPDF requiere API de navegador modernas para funcionar. Para utilizar jsPDF en navegadores más antiguos como Internet Explorer, se requieren polyfills. Puede cargar todos los polyfills necesarios de la siguiente manera:
import "jspdf/dist/polyfills.es.js" ;Alternativamente, puede cargar el archivo Polyfill preempaquetado. Esto no se recomienda, ya que podría terminar cargando polyfills varias veces. Aún podría resultar útil para aplicaciones pequeñas o pruebas de concepto rápidas.
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/polyfills.umd.js " > </ script > Las 14 fuentes estándar en PDF están limitadas a la página de códigos ASCII. Si desea utilizar UTF-8, debe integrar una fuente personalizada que proporcione los glifos necesarios. jsPDF admite archivos .ttf. Entonces, si desea tener, por ejemplo, texto en chino en su pdf, su fuente debe tener los glifos chinos necesarios. Por lo tanto, verifique si su fuente admite los glifos deseados o, de lo contrario, mostrará caracteres confusos en lugar del texto correcto.
Para agregar la fuente a jsPDF use nuestro convertidor de fuentes en /fontconverter/fontconverter.html. El convertidor de fuentes creará un archivo js con el contenido del archivo ttf proporcionado como una cadena codificada en base64 y código adicional para jsPDF. Sólo tienes que agregar este archivo js generado a tu proyecto. Entonces estará listo para usar el método setFont en su código y escribir su texto codificado en UTF-8.
Alternativamente, puedes simplemente cargar el contenido del archivo *.ttf como una cadena binaria usando fetch o XMLHttpRequest y agregar la fuente al archivo PDF:
const doc = new jsPDF ( ) ;
const myFont = ... // load the *.ttf font file as binary string
// add the font to jsPDF
doc . addFileToVFS ( "MyFont.ttf" , myFont ) ;
doc . addFont ( "MyFont.ttf" , "MyFont" , "normal" ) ;
doc . setFont ( "MyFont" ) ; Desde la fusión con la bifurcación yWorks, hay muchas características nuevas. Sin embargo, algunos de ellos rompen la API, por lo que existe un cambio de API entre dos modos de API:
Puede cambiar entre los dos modos llamando
doc . advancedAPI ( doc => {
// your code
} ) ;
// or
doc . compatAPI ( doc => {
// your code
} ) ;JsPDF volverá automáticamente al modo API original después de que se haya ejecutado la devolución de llamada.
Verifique si su pregunta ya está resuelta en Stackoverflow https://stackoverflow.com/questions/tagged/jspdf. No dude en hacer una pregunta allí con la etiqueta jspdf .
Las solicitudes de funciones, informes de errores, etc. son bienvenidos como problemas. Tenga en cuenta que los informes de errores deben seguir estas pautas:
¡jsPDF no puede vivir sin la ayuda de la comunidad! Si cree que falta una característica o encontró un error, considere si puede dedicar una o dos horas y preparar una solicitud de extracción. Si simplemente está interesado en este proyecto y quiere ayudar, eche un vistazo a los problemas abiertos, especialmente aquellos etiquetados con "error".
Puede encontrar información sobre cómo crear y probar jsPDF en la guía de contribución.
Copyright (c) 2010-2021 James Hall, https://github.com/MrRio/jsPDF (c) 2015-2021 yWorks GmbH, https://www.yworks.com/
Por el presente se otorga permiso, sin cargo, a cualquier persona que obtenga una copia de este software y los archivos de documentación asociados (el "Software"), para operar con el Software sin restricciones, incluidos, entre otros, los derechos de uso, copia, modificación, fusión. , publicar, distribuir, sublicenciar y/o vender copias del Software, y permitir que las personas a quienes se les proporciona el Software lo hagan, sujeto a las siguientes condiciones:
El aviso de derechos de autor anterior y este aviso de permiso se incluirán en todas las copias o partes sustanciales del Software.
EL SOFTWARE SE PROPORCIONA "TAL CUAL", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O IMPLÍCITA, INCLUYENDO PERO NO LIMITADO A LAS GARANTÍAS DE COMERCIABILIDAD, IDONEIDAD PARA UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN. EN NINGÚN CASO LOS AUTORES O TITULARES DE DERECHOS DE AUTOR SERÁN RESPONSABLES DE NINGÚN RECLAMO, DAÑO U OTRA RESPONSABILIDAD, YA SEA EN UNA ACCIÓN CONTRACTUAL, AGRAVIO O DE OTRA MANERA, QUE SURJA DE, FUERA DE O EN RELACIÓN CON EL SOFTWARE O EL USO U OTRAS NEGOCIOS EN EL SOFTWARE.
