¿Caras de fuentes personalizadas en jsPDF?

Por fin luego de mucho batallar hemos dado con el resultado de este enigma que tantos lectores de este espacio presentan. Si tienes algo que aportar no dudes en compartir tu comentario.

Solución:

Descubrí que esto era posible modificando jsPDF.js para exponer lo existente addFont método en la API pública.

En jsPDF.js, buscar:

//---------------------------------------
// Public API

Agregue lo siguiente:

    API.addFont = function(postScriptName, fontName, fontStyle) 
      addFont(postScriptName, fontName, fontStyle, 'StandardEncoding');
    ;

Puse este método cerca de otros métodos de fuente para mayor claridad: API.setFont, API.setFontSize, API.setFontTypeetc.

Ahora en tu código, usa:

doc.addFont('ComicSansMS', 'Comic Sans', 'normal');
doc.setFont('Comic Sans');
doc.text(50,50,'Hello World');

Esto me funciona con las fuentes @ font-face incluidas con css antes de cargar jsPDF, así como con las fuentes del sistema. Probablemente haya una mejor manera de hacer esto usando el marco de complementos de jsPDF, pero esta solución rápida y sucia debería al menos ponerlo en marcha.

Tenga en cuenta que doc.getFontList() será no mostrar fuentes agregadas:

// TODO: iterate over fonts array or return copy of fontmap instead in case more are ever added.

Parece mucho más fácil con la última versión de jsPDF (1.5.3):

Si miras en la carpeta jsPDF-master > fontconverter, hay un archivo fontconverter.html. Abra en su navegador y use el Browse... para navegar y seleccionar su .ttf archivo de fuente.

Haga clic en ‘Crear’.

La página ofrecerá una “descarga” para guardar. Esto producirá un .js archivo llamado [something like] RopaSans-Regular-normal.js. Esto debe incluirse en su página que produce los PDF. Personalmente, lo hice en el encabezado de la página principal (y tenga en cuenta el orden de los scripts):

Ahora en su método de generación de PDF en js:

doc.setFont('RopaSans-Regular');
doc.setFontType('normal');

Aquí está la solución que estoy usando …

Primero, como han mencionado otros, necesita estas dos bibliotecas:

1. jsPDF: https://github.com/MrRio/jsPDF
2. jsPDF-CustomFonts-support: https://github.com/sphilee/jsPDF-CustomFonts-support

Siguiente – la segunda biblioteca requiere que le proporcione al menos una fuente personalizada en un archivo llamado default_vfs.js. Estoy usando dos fuentes personalizadas, Arimo-Regular.ttf y Arimo-Bold.ttf, ambas de Google Fonts. Así que mi default_vfs.js archivo tiene este aspecto:

(

(function (jsPDFAPI)  
    "use strict";
    jsPDFAPI.addFileToVFS('Arimo-Regular.ttf','[Base64-encoded string of your font]');
    jsPDFAPI.addFileToVFS('Arimo-Bold.ttf','[Base64-encoded string of your font]');
)(jsPDF.API);

Obviamente, su versión se vería diferente, dependiendo de la (s) fuente (s) que esté usando.

Hay muchas formas de obtener la codificación Base64 string para su fuente, pero usé esto: https://www.giftofspeed.com/base64-encoder/.

Te permite cargar un archivo .ttf de fuente y te dará Base64 string que puedes pegar en default_vfs.js.

Puede ver cómo se ve el archivo real, con mis fuentes, aquí: https://cdn.rawgit.com/stuehler/jsPDF-CustomFonts-support/master/dist/default_vfs.js

Entonces, una vez que sus fuentes estén almacenadas en ese archivo, su HTML debería verse así:

Finalmente, su código JavaScript se parece a esto:

const doc = new jsPDF(
      unit: 'pt',
      orientation: 'p',
      lineHeight: 1.2
    );

doc.addFont("Arimo-Regular.ttf", "Arimo", "normal");
doc.addFont("Arimo-Bold.ttf", "Arimo", "bold");

doc.setFont("Arimo");
doc.setFontType("normal");
doc.setFontSize(28);

doc.text("Hello, World!", 100, 100);

doc.setFontType("bold");

doc.text("Hello, BOLD World!", 100, 150);

doc.save("customFonts.pdf");

Esto probablemente sea obvio para la mayoría, pero en ese addFont() método, los tres parámetros son:

1. El nombre de la fuente que usaste en el addFileToVFS() función en el default_vfs.js Archivo
2. El nombre de la fuente que usa en el setFont() función en su JavaScript
3. El estilo de fuente que usa en el setFontType() función en su JavaScript

Puede ver esto funcionando aquí: https://codepen.io/stuehler/pen/pZMdKo

Espero que esto funcione tan bien para ti como para mí.

Recuerda algo, que puedes permitirte decir si te fue de ayuda.

---

---

Utiliza Nuestro Buscador