web-dev-qa-db-fra.com

La police personnalisée JSPDF ne fonctionne pas

Code CSS

@font-face {
    font-family: Calibri;
    src: url("fonts/calibri.ttf");
    font-style: normal;
}

Code JS

doc.setFont('Calibri');
doc.setFontSize(7.5);
doc.setFontType("normal");
doc.text(10, 10, "Hi, How r u");

Je veux ajouter Calibri Font, mais cela ne fonctionne pas

Liste de script js inclus

<script src="/assets/global/scripts/jspdf/jspdf.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/acroform.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/from_html.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addhtml.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/annotations.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/autoprint.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/canvas.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/cell.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/context2d.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/javascript.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/outline.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/prevent_scale_to_fit.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/split_text_to_size.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/standard_fonts_metrics.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/svg.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/total_pages.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/zlib.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png_support.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/filesaver.js" type="text/javascript"></script>

CSS

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 23, 2017, 12:57:52 PM
    Author     : common
*/

@font-face {
    font-family: Calibri;
    src: url("fonts/calibri.ttf");
    font-style: normal;
}

/*
@font-face {
    font-family: Calibri;
    src: url("fonts/calibrii.ttf");
    font-style: italic;
}

@font-face {
    font-family: Calibri;
    src: url("fonts/calibrib.ttf");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: Calibri;
    src: url("fonts/calibriz.ttf");
    font-style: italic;
    font-weight: bold;
}*/
javascriptjspdf
11
Hardeep Singh

Pour jsPdf version 1.4.0 et ultérieure, il est possible d'utiliser une police personnalisée (ttf). La police personnalisée doit être encodée en base64. Malheureusement, toutes les polices ne fonctionnent pas.

var doc = new jsPDF('landscape');

// to generate 'yourCustomFontTtfBase64Encoded' you can use 
// jsPDF-CustomFonts-support library (on their
// github page there are all instructions for that)
doc.addFileToVFS('yourCustomFont.ttf', 'yourCustomFontTtfBase64Encoded');

doc.addFont('yourCustomFont.ttf', 'yourCustomFont', 'normal');

doc.setFont('yourCustomFont');

la bibliothèque de support jsPDF-CustomFonts permettant de générer "yourCustomFontTtfBase64Encoded" est ici: https://github.com/sphilee/jsPDF-CustomFonts-support

3
Vadi

Bonjour, vous pouvez essayer de modifier les polices de ce type,

API.addFont = function(fontScript, font, style) {
      addFont(fontScript, font, style, 'StandardEncoding');
    };

ci-dessus, vous devrez ajouter à lib/avant votre invocation de modification de police, mais je suggérerais d'ajouter une balise de script juste après le chargement de jspdf et d'ajouter cette fonction dans cette balise de script.

Maintenant, vous devez ajouter la police CSS,

et alors vous pouvez modifier la police du pdf comme ceci.

doc.addFont('fonts/calibri.ttf', 'Calibri', 'normal');
doc.setFont('Calibri');
doc.text(50,50,'Now this is Calibri');
1
MehulJoshi

Comme indiqué ci-dessus, vous pouvez utiliser la bibliothèque de support jsPDF-CustomFonts à https://github.com/sphilee/jsPDF-CustomFonts-support .

Il y a des instructions dans le fichier READ.ME, mais ce qui m'a fait aller était ces instructions https://github.com/sphilee/jsPDF-CustomFonts-support/issues/16#issuecomment-307174041 :

  1. Téléchargez votre police .ttf dans Font Squirell https://www.fontsquirrel.com/tools/webfont-generator
  2. Appuyez sur Télécharger et vous obtiendrez un fichier compressé avec un nouveau fichier .ttf. Vous devez maintenant encoder en base64 https://www.giftofspeed.com/base64-encoder/ . 
  3. Une fois que vous avez le code base64 de votre police, vous devez accéder au fichier vfs_fonts.js que vous avez téléchargé avec jsPDF-CustomFonts-support https://github.com/sphilee/jsPDF-CustomFonts-support et après l’un des ',' utilisés pour séparer les différentes polices de ce fichier, vous devez ajouter: "YOUR_FONT_NAME.ttf": "YOUR BASE64 CODE", (n'oubliez pas de terminer par une virgule à la fin, après le citations). 
  4. Une fois que vous faites cela, vous pouvez ajouter la fonction doc. addFont ("YOUR_FONT_NAME.ttf", "YOUR_FONT_NAME.ttf", "normal", "WinAnsiEncoding").
0
tmsss

Vous ne pouvez pas pour le moment.

Si vous examinez le code source , vous verrez qu'il existe un commutateur qui, s'il ne connaît pas la police, renvoie times en tant que police.

switch (fontName) {
      case 'sans-serif':
      case 'verdana':
      case 'arial':
      case 'helvetica':
        fontName = 'helvetica';
        break;
      case 'fixed':
      case 'monospace':
      case 'terminal':
      case 'courier':
        fontName = 'courier';
        break;
      case 'serif':
      case 'cursive':
      case 'fantasy':
      default:
        fontName = 'times';
        break;
    }

Vous pouvez soit utiliser l'une de ces polices, soit modifier la bibliothèque pour prendre en charge votre police.

Sinon, il existe une bibliothèque de travaux en cours qui prend en charge les polices personnalisées: https://github.com/sphilee/jsPDF-CustomFonts-support

Après avoir ajouté tous les fichiers nécessaires, vous devriez l’utiliser comme ceci:

doc.addFont('fonts/calibri.ttf', 'Calibri', 'Calibri-normal', 'normal');
0
rpadovani

Voici la solution que j'utilise. Fonctionne bien (voir ci-dessous pour travailler codepen) ...

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

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

Suivant - 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 provenant 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, en fonction de la ou des polices que vous utilisez.

Il existe de nombreuses 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 pouvez coller dans default_vfs.js.

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

Donc, une fois que vos polices sont 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 une évidence pour la plupart des gens, mais dans cette méthode addFont(), les trois paramètres sont les suivants:

  1. Le nom de la 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 que cela fonctionne ici: https://codepen.io/stuehler/pen/pZMdKo

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

0
mattstuehler