Пользовательские грани шрифта в jsPDF?

Ответ 1

Я обнаружил, что это было возможно, изменив jsPDF.js, чтобы открыть существующий метод addFont в общедоступном API.

В jsPDF.js найдите:

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

Добавьте следующее:

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

Я помещаю этот метод рядом с другими методами шрифтов для ясности - API.setFont, API.setFontSize, API.setFontType и т.д.

Теперь в вашем коде используйте:

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

Это работает для меня с шрифтами @font-face, включенными в css, перед загрузкой jsPDF, а также с системными шрифтами. Вероятно, лучший способ сделать это с помощью платформы jsPDF plugin, но это быстрое и грязное решение должно по крайней мере заставить вас идти.

Обратите внимание, что doc.getFontList() будет не показывать добавленные шрифты:

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

Ответ 2

Кажется, с последней версией jsPDF (1.5.3) гораздо проще:

Если вы посмотрите в папку jsPDF-master> fontconverter, там есть файл fontconverter.html. Откройте браузер и с помощью кнопки Browse... перейдите к файлу шрифта .ttf и выберите его.

Нажмите "Создать".

На странице будет предложено "скачать" для сохранения. Это создаст файл .js с именем [что-то вроде] RopaSans-Regular-normal.js. Это должно быть включено в вашу страницу, производящую PDF. Лично я сделал это в заголовке главной страницы (и, пожалуйста, обратите внимание на порядок script):

<!-- 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>

Теперь в вашем методе создания PDF в js:

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

Ответ 3

Вот решение, которое я использую...

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

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

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

Ответ 4

Я использую Angular 8, и ответ тодда работал на меня.

Получив файл .js из fontconverter.html, вы можете импортировать его в машинописном тексте следующим образом:

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

Тогда все, что вам нужно сделать, чтобы загрузить шрифт, это 'call' fontref примерно так:

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
  }