Add Custom font in jspdf

问题

i want to use custom font such as 'Comic Sans MS' or 'Calibri' font in jsPDF. i have found similar question here, but mine is not working. i already added the latest jspdf. and my code is like below :

        var doc = new jsPDF('p','mm','a4');

        doc.addFont('ComicSansMS', 'Comic Sans', 'normal','StandardEncoding');
        doc.setFont('Comic Sans');          
        doc.text(10, 10, "Lorem ipsum dolor sit amet!");
        doc.output('dataurl');

but the pdf result's font is still the default font ( not comic sans ). and there is no error. Please help...

回答1:

i have found the solution,

don't use the jspdf.js, but use the debug.jspdf.js

and after that add this code in the debug.jspdf.js

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

回答2:

Since the other answers here are a little out of date, here is the solution I'm using...

First, as others have mentioned - you need these two libraries:

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

Next - the second library requires that you provide it with at least one custom font in a file named default_vfs.js. I'm using two custom fonts - Arimo-Regular.ttf and Arimo-Bold.ttf - both from Google Fonts. So, my default_vfs.js file looks like this:

(

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

Obviously, you version would look different, depending on the font(s) you're using.

There's a bunch of ways to get the Base64-encoded string for your font, but I used this: https://www.giftofspeed.com/base64-encoder/.

It lets you upload a font .ttf file, and it'll give you the Base64 string that you can paste into default_vfs.js.

You can see what the actual file looks like, with my fonts, here: https://cdn.rawgit.com/stuehler/jsPDF-CustomFonts-support/master/dist/default_vfs.js

So, once your fonts are stored in that file, your HTML should look like this:

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

Finally, your JavaScript code looks something like this:

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

This is probably obvious to most, but in that addFont() method, the three parameters are:

The font's name you used in the addFileToVFS() function in the default_vfs.js file
The font's name you use in the setFont() function in your JavaScript
The font's style you use in the setFontType() function in your JavaScript

You can see this working here: https://codepen.io/stuehler/pen/pZMdKo

Hope this works as well for you as it did for me.

回答3:

Similar question looks like you missed this one out

 **************
    API.addFont = function(postScriptName, fontName, fontStyle) {
          addFont(postScriptName, fontName, fontStyle, 'StandardEncoding');
        };
    ****************
        doc.addFont('ComicSansMS', 'Comic Sans', 'normal');
        doc.setFont('Comic Sans');
        doc.text(50,50,'Hello World');

    http://stackoverflow.com/a/26981550/5086633

回答4:

I found this github link

1: https://github.com/MrRio/jsPDF/blob/master/examples/js/basic.js#L390 and function name demoUsingTTFFont() useful for me.and to convert into base64 encoder link

来源：https://stackoverflow.com/questions/31961572/add-custom-font-in-jspdf

标签

javascript

fonts

jspdf