Пользовательский шрифт JSPDF Добавить не работает

Ответ 1

Для jsPdf версии 1.4.0 и более поздних версий есть возможность использовать пользовательский шрифт (ttf). Пользовательский шрифт должен быть закодирован в base64. К сожалению, не все шрифты работают.

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

Библиотека поддержки jsPDF-CustomFonts для генерации yourCustomFontTtfBase64Encoded находится здесь: https://github.com/sphilee/jsPDF-CustomFonts-support

Ответ 2

Привет, вы можете попробовать и изменить шрифты, подобные этому,

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

выше, вам нужно будет добавить в lib/перед вызовом изменения шрифта, но я бы предложил добавить тег script сразу после загрузки jspdf и добавить эту функцию в тег script.

Теперь вам нужно добавить шрифт css,

а затем вы можете изменить шрифт pdf таким образом.

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

Ответ 3

В настоящий момент вы не можете.

Если вы посмотрите на исходный код, вы увидите, что есть переключатель, который, если он не знает шрифта, возвращает times как шрифт

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;
    }

Вы можете использовать один из этих шрифтов или отредактировать библиотеку для поддержки вашего шрифта.

В противном случае в библиотеке продолжается работа, которая добавляет поддержку пользовательских шрифтов: https://github.com/sphilee/jsPDF-CustomFonts-support

После добавления всех необходимых файлов вы должны использовать его следующим образом:

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

Ответ 4

Как указано выше, вы можете использовать библиотеку поддержки jsPDF-CustomFonts в https://github.com/sphilee/jsPDF-CustomFonts-support.

Есть инструкции по файлу READ.ME, но я получил следующие инструкции https://github.com/sphilee/jsPDF-CustomFonts-support/issues/16#issuecomment-307174041:

• Загрузите шрифт .ttf в Font Squirell https://www.fontsquirrel.com/tools/webfont-generator
• Нажмите кнопку загрузки, и вы получите сжатый файл с новым .ttf файлом. Теперь вам нужно закодировать base64 https://www.giftofspeed.com/base64-encoder/.
• Когда у вас есть код base64 вашего шрифта, вам нужно перейти в файл vfs_fonts.js, который вы загрузили с помощью поддержки jsPDF-CustomFonts https://github.com/sphilee/jsPDF-CustomFonts-support и после того, как один из "," используется для разделения разных шрифтов в этом файле, вы должны добавить: "YOUR_FONT_NAME.ttf" : "ВАШ BASE64 CODE" (не забудьте закончить с запятой в конце, после котировок).
• После этого вы можете добавить функцию doc. AddFont ( "YOUR_FONT_NAME.ttf" , "YOUR_FONT_NAME.ttf" , "нормальный", "WinAnsiEncoding" ).

Ответ 5

Вот решение, которое я использую. Хорошо работает (см. Ниже для работы codepen)...

Во-первых, как уже упоминали другие - вам понадобятся эти две библиотеки:

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

Далее - вторая библиотека требует, чтобы вы предоставили ей хотя бы один пользовательский шрифт в файле default_vfs.js. Я использую два пользовательских шрифта - Arimo-Regular.ttf и Arimo-Bold.ttf - оба из Google Fonts. Итак, мой файл default_vfs.js выглядит так:

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

Очевидно, что ваша версия будет выглядеть по-разному, в зависимости от используемых вами шрифтов.

Существует множество способов получить строку в кодировке Base64 для вашего шрифта, но я использовал это: https://www.giftofspeed.com/base64-encoder/.

Он позволяет вам загрузить файл шрифта .ttf и даст вам строку Base64, которую вы можете вставить в default_vfs.js.

Вы можете увидеть, как выглядит настоящий файл с моими шрифтами, здесь: https://cdn.rawgit.com/stuehler/jsPDF-CustomFonts-support/master/dist/default_vfs.js

Итак, когда ваши шрифты сохранены в этом файле, ваш HTML должен выглядеть следующим образом:

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

Наконец, ваш код JavaScript выглядит примерно так:

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

Это, вероятно, очевидно для большинства, но в этом addFont() три параметра:

1. Имя шрифта, которое вы использовали в функции addFileToVFS() в файле default_vfs.js
2. Имя шрифта, которое вы используете в функции setFont() в вашем JavaScript
3. Стиль шрифта, который вы используете в функции setFontType() в вашем JavaScript

Вы можете увидеть это работает здесь: https://codepen.io/stuehler/pen/pZMdKo

Надеюсь, это работает так же хорошо для вас, как и для меня.