Jspdf pubsub error no unicode cmap for font error no unicode cmap for font

Я пытаюсь добавить собственный шрифт в jsPDF. Я преобразовал свой файл в base64 и сделал следующее:

doc.addFileToVFS("font/rajdhani-regular-webfont.woff", base64enc);

Где base64enc — это строка в кодировке base 64

Затем добавляю шрифт следующим образом:

doc.addFont('font/rajdhani-regular-webfont.woff', 'rajdhani', 'normal');

doc.setFont('rajdhani');

Однако я продолжаю получать следующую ошибку

[Error] jsPDF PubSub Error – "No unicode cmap for font" – Error: No unicode cmap for font — jspdf.min.js:9068
Error: No unicode cmap for font — jspdf.min.js:9068registerTTF — jspdf.min.js:9068i — jspdf.min.js:9027:86open — jspdf.min.js:9032(anonymous function) — jspdf.min.js:6031publish — jspdf.min.js:308yt — jspdf.min.js:729:166addFont — jspdf.min.js:1286callme — freport.php:500onclick — freport.php:100
    publish (jspdf.min.js:29:5989)
    yt (jspdf.min.js:29:18435)
    addFont (jspdf.min.js:29:33701)
    callme (freport.php:500)
    onclick (freport.php:100)

Я не знаю, почему это происходит.

Я тоже боролся, но наконец нашел, как это сделать!

Как упоминалось, здесь есть конвертер шрифтов, созданный jsPDF Участники, которых вы можете найти здесь.

Сначала загрузите сюда свой шрифт, а затем введите его название. Он сгенерирует JS-файл, который затем вам нужно будет включить в свой проект. Если хотите, это может быть ваша папка js.

И как только он окажется в вашей папке, добавьте этот тег скрипта в свой index.html (или любой другой html-файл, для которого вам нужен jsPDF).

<script src="./fontName.js"></script>

Теперь, когда у вас есть шрифт, автоматически добавленный в jsPDF Api для вас с этим файлом, вы можете продолжить и удалить две строки ниже из вашего кода .

doc.addFileToVFS("font/rajdhani-regular-webfont.woff", base64enc);
doc.addFont('font/rajdhani-regular-webfont.woff', 'rajdhani', 'normal');

Как только вы это сделаете, просто проверьте файл, который вы загрузили из конвертера, и вы должны увидеть в самом низу название вашего шрифта в втором параметре приведенного ниже кода .

this.addFont('fontFile.woff', 'THIS IS FONT NAME' , '.......');

Скопируйте это имя. Скажем, его «раджани» для этого примера. Таким образом, вы просто помещаете это перед любым текстом, который вы создаете в экземпляре jsPDF (doc).

doc.setFont('rajdhani');

Вы можете просто проверить это ниже

/* 
"p" for portrait page orientation
"pt" for points. default is mm
"a4" is page size 
*/
var doc = new jsPDF("p","pt","a4"); 
doc.setFont('rajdhani');
doc.text('This is a test', 20,20);
doc.save('filename.pdf');

Теперь вы должны увидеть PDF-файл с левым 20px верхним полем 20px с надписью «Это тест» с вашим стилем шрифта.

Надеюсь это поможет

Также для пользователей модуля ES6 шаги очень похожи.

Если вы здесь ищете решение для Ionic 4 angular typescript , как и я, ниже представлено решение, которое сработало для меня!

Сначала вам нужно установить пакет через npm, как показано ниже.

npm install jspdf@latest --save

После этого, как упоминалось в моем предыдущем ответе, есть конвертер шрифтов, созданный jsPDF Contributers, который вы можете найти на здесь. Используйте это, чтобы загрузить файл шрифта и включить его в свой проект в удобное для ссылки место внутри файла TS, чтобы он мог находиться, например, в той же папке, что и файл ts.

-fontname-style.js // <<--- Here (This is the file you downloaded from converter)
-custom.page.module.ts
-custom.page.html
-custom.page.scss
-custom.page.spec.ts
-custom.page.ts

Теперь в свой custom.page.ts импортируйте следующее:

import * as jsPDF from 'jspdf';
import './fontname-style.js';

//OPTIONAL (Only import if you want to use autotable)
import 'jspdf-autotable';
import { autoTable as AutoTable } from 'jspdf-autotable';

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

This.addFont (‘fontFile.ttf’, ‘fontName’, ‘…….’);

Теперь вы можете создать такую ​​функцию внутри custom.page.ts ;

//custom.component.ts or custom.page.ts etc.
exportPDF(){
  var doc = new jsPDF("p","pt","a4"); // You can set your own  paramaters
  doc.setFont('fontName');
  doc.text('This is a test', 20,20); // You can set your own margins
  return doc.save('filename.pdf');
}

Теперь вы должны увидеть PDF-файл с левым 20px верхним полем 20px с надписью «Это тест» с вашим стилем шрифта

ДОПОЛНИТЕЛЬНЫЙ ПЛАГИН — AutoTable для jsPDF

Если вы хотите использовать плагин autotable для jsPDF, установите следующий пакет из npm.

npm install jspdf-autotable@latest --save

После установки добавьте эти два импорта в свой custom.page.ts .

import 'jspdf-autotable';
import { autoTable as AutoTable } from 'jspdf-autotable';

Вы можете создать данные из столбцов и заголовков, если хотите

И внутри функции exportPDF (), которую мы создали перед добавлением этих строк;

//custom.component.ts or custom.page.ts etc.
exportPDF(){
  var doc = new jsPDF("p","pt","a4");
  doc.setFont('fontName');
  doc.text('This is a test', 20,20); // <-- Remove this line
  ((doc as any).autoTable as AutoTable)({
    head: [['Name', 'Email', 'Country']], // <-- Table headers
    body: [                               // <-- Table body
            ['David', 'david@example.com', 'Sweden'],
            ['Castille', 'castille@example.com', 'Norway'],
            // ...
          ],
    styles: { font: "fontName" } /* <-- This is for the font to work in your 
  table */
  });

  return doc.save('filename.pdf');
}

Теперь у вас должен получиться pdf с таблицей внутри вашего шрифта

Надеюсь, это кому-то поможет.

Я столкнулся с той же проблемой и выполнил шаги, которые объяснил @TuncGerdan. Мои ошибки были устранены, но в консоли появляется следующее предупреждение.

jspdf.min.js:29 Unable to look up font label for font 'font name', 'normal'. Refer to getFontList() for available fonts.

Когда я получаю список шрифтов с помощью doc.getFontList (), я вижу пользовательский шрифт, который я включил в список.

Может ли кто-нибудь помочь с этим.