web-dev-qa-db-fra.com

Visages de police personnalisés dans jsPDF?

Est-il possible d'inclure des polices personnalisées dans jsPDF?

Avec la bibliothèque de base, si je console le journal 'doc.getFontList ()' j'obtiens:

Courrier, Helvetica, Times, courrier, helvetica, times

Mais, disons que je veux utiliser 'Comic Sans' (pas que je le ferais; o)) est-ce possible?

Encore mieux, pourrais-je utiliser une police stockée localement et déclarée sur le site avec @ font-face?

jspdf
18
Pat Dobson

J'ai trouvé que c'était possible en modifiant jsPDF.js Pour exposer la méthode addFont existante dans l'API publique.

Dans jsPDF.js, Recherchez:

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

Ajoutez ce qui suit:

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

J'ai mis cette méthode près d'autres méthodes de police pour plus de clarté - API.setFont, API.setFontSize, API.setFontType, Etc.

Maintenant dans votre code, utilisez:

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

Cela fonctionne pour moi avec les polices @ font-face incluses avec css avant de charger jsPDF, ainsi que les polices système. Il y a probablement une meilleure façon de le faire en utilisant le framework de plugins de jsPDF, mais cette solution rapide et sale devrait au moins vous aider.

Notez que doc.getFontList() n'affichera pas les polices ajoutées:

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

Cela semble beaucoup plus facile avec la dernière version de jsPDF (1.5.3) :

Si vous regardez dans le dossier jsPDF-master> fontconverter, il y a un fichier fontconverter.html. Ouvrez dans votre navigateur et utilisez le Browse... pour naviguer et sélectionner votre .ttf fichier de polices.

Cliquez sur "Créer".

enter image description here

La page proposera un "téléchargement" à enregistrer. Cela produira un .js fichier appelé [quelque chose comme] RopaSans-Regular-normal.js. Cela doit être inclus dans votre page produisant les PDF. Personnellement, je l'ai fait dans l'en-tête de la page principale (et veuillez noter l'ordre des scripts):

<!-- pdf creation -->
<script src="FileSaver.js-master/src/FileSaver.js"></script>
<script src="jsPDF-master/dist/jspdf.debug.js"></script>

<!-- custom font definition -->
<script src="path-to-the-file-just-saved/RopaSans-Regular-normal.js" type="module"></script>

Maintenant dans votre PDF en js:

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

Voici la solution que j'utilise ...

Tout d'abord, comme d'autres l'ont mentionné - vous avez besoin de ces deux bibliothèques:

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

Ensuite - la deuxième bibliothèque nécessite que vous lui fournissiez au moins une police personnalisée dans un fichier nommé default_vfs.js. J'utilise deux polices personnalisées - Arimo-Regular.ttf et Arimo-Bold.ttf - toutes deux de Google Fonts. Donc, mon fichier default_vfs.js Ressemble à ceci:

(

(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);

De toute évidence, votre version serait différente, selon la ou les polices que vous utilisez.

Il y a un tas de façons d'obtenir la chaîne encodée en Base64 pour votre police, mais j'ai utilisé ceci: https://www.giftofspeed.com/base64-encoder/ .

Il vous permet de télécharger un fichier de police .ttf et vous donnera la chaîne Base64 que vous pourrez coller dans default_vfs.js.

Vous pouvez voir à quoi ressemble le fichier réel, avec mes polices, ici: https://cdn.rawgit.com/stuehler/jsPDF-CustomFonts-support/master/dist/default_vfs.js

Ainsi, une fois vos polices stockées dans ce fichier, votre code HTML devrait ressembler à ceci:

    <script src="js/jspdf.min.js"></script>
    <script src="js/jspdf.customfonts.min.js"></script>
    <script src="js/default_vfs.js"></script>

Enfin, votre code JavaScript ressemble à ceci:

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");

C'est probablement évident pour la plupart, mais dans cette méthode addFont(), les trois paramètres sont:

  1. Le nom de police que vous avez utilisé dans la fonction addFileToVFS() dans le fichier default_vfs.js
  2. Le nom de la police que vous utilisez dans la fonction setFont() dans votre JavaScript
  3. Le style de police que vous utilisez dans la fonction setFontType() dans votre JavaScript

Vous pouvez voir cela fonctionner ici: https://codepen.io/stuehler/pen/pZMdKo

J'espère que cela fonctionne aussi bien pour vous que pour moi.

3
mattstuehler

J'utilise Angular 8 et réponse de Todd a fonctionné pour moi.

Une fois que vous avez obtenu le fichier .js à partir de fontconverter.html, vous pouvez l'importer dans TypeScript comme suit:

import fontref = require('path/to/font/CustomFont-normal.js')

Ensuite, tout ce que vous avez à faire pour charger la police est 'call' fontref comme ceci:

makePdf() {
    let doc = new jsPDF();

    fontref;                             // 'run' .js to load font

    doc.getFontList();                   // contains a key-value pair for CustomFont

    doc.setFont("CustomFont");           // set font
    doc.setFontType("normal");
    doc.setFontSize(28);
    doc.text("Hello", 20, 20);

    window.open(doc.output('bloburl'));  // open pdf in new tab
  }
1
juancho