Включение UTF-8 в jsPDF с помощью Angular

Привет, разработчики, я предполагаю, что вы уже знаете, как экспортировать pdf через jsPDF. Если ответ отрицательный, то вы можете ознакомиться с моей предыдущей статьей. В этой статье я расскажу вам о распространенной проблеме и способах ее решения, связанной с экспортом PDF-файла, содержащего символы UTF-8.

В следующем примере показан вывод в PDF описания и тегов. Видно, что тексты последних двух тегов повреждены, и причина в том, что они содержат символы UTF-8. Поскольку библиотека jsPDF не поддерживает эти символы автоматически, нам необходимо добавить пользовательское семейство шрифтов, чтобы получить желаемый результат.

После создания нового экземпляра jsPDF мы можем воспользоваться консольным журналом методов "getFontList" и "getFont", чтобы увидеть шрифты по умолчанию.

Ни один из перечисленных выше шрифтов нам не подходит, так как они не поддерживают UTF-8. Вы можете зайти в google fonts и проверить различные типы шрифтов, чтобы увидеть, какой из них имеет необходимые глифы для вас. В этом демо я буду использовать Open Sans, так как он отлично подходит для моих текстов.

Вы также можете выбрать шрифт, набор символов и размер шрифта здесь и загрузить файлы. Для своего проекта я выбрал все наборы символов и обычный размер шрифта. Среди скачанных файлов нам нужен файл в формате TTF, так как нам нужно преобразовать этот файл в "fontconverter" в файл Javascript.

После того, как вы выберете TTF-файл шрифта для конвертации, вы найдете строку в кодировке base64 в этом Javascript-файле. Вы можете экспортировать эту строку оттуда или скопировать и сохранить ее в другом месте. Я скопировал эту закодированную строку и сохранил ее в файле Typescript для удобства экспорта.

export const OpenSansEncoded: string = 'AAEAAAAASAQAABAAgR0RFRqOgoD8AAZxAAABpkdQT1OT967xAAGd6AAAN4RHU1VCHQIfmgAB1WwAAAcwT1MvMpZAgywAAV2YAAAYFNUQVRe+0M1AAHcnAAAAAAF5j...............'

Затем вы можете импортировать эту закодированную строку для использования в вашем методе экспорта. В самой библиотеке есть vFS, которая работает с файлами. Нам нужно выполнить 3 метода шаг за шагом. Сначала мы добавляем нашу base64 закодированную строку с именем файла, вызывая функцию "addFileToVFS". Затем мы можем добавить наш пользовательский шрифт в текущий экземпляр PDF, а чтобы проверить, был ли он добавлен или нет, мы можем использовать консольный лог "getFontList".

Когда мы увидим, что наш пользовательский шрифт добавлен в список шрифтов, мы можем вызвать метод "setFont", чтобы установить наш шрифт по умолчанию. Если вы планируете добавлять тексты методом jsPDF "text", вы увидите, что наши нужные символы UTF-8 больше не повреждаются. Если вы попытаетесь использовать метод jsPDF "html" и загруженный вами шрифт является шрифтом по умолчанию вашего текущего проекта, то все будет хорошо. Однако если шрифт по умолчанию в вашем проекте другой, то вы увидите, что ничего не изменилось. Все, что вам нужно сделать, это установить ваш пользовательский шрифт в качестве встроенного CSS, чтобы переопределить шрифт по умолчанию при экспорте PDF-файла.

Шрифт по умолчанию в проекте - "Verdana", который не поддерживает кодовые таблицы UTF-8. В приведенном выше примере оба div содержат по 2 слова с символами UTF-8. У div с description id; есть встроенный стиль Open Sans для переопределения Verdana, но у div с tag id его нет. Мы видим, что теги все еще повреждены, в то время как с описанием все в порядке.

Спасибо за прочтение и надеюсь, что вы нашли ответ. Буду признателен за ваши отзывы!