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

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

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

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

В следующем примере показан вывод в PDF описания и тегов Видно что тексты последних двух

После создания нового экземпляра 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 его нет. Мы видим, что теги все еще повреждены, в то время как с описанием все в порядке.

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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.