Почему html2canvas не отображает текст в PDF: полное руководство

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

Основные причины, почему текст не отображается

Проблема может возникать из-за особенностей рендеринга html2canvas, несовместимости шрифтов или неправильной обработки CSS-стилей. Рассмотрим самые частые сценарии.

1. Неправильная настройка шрифтов

html2canvas использует системные шрифты браузера. Если в вашем проекте применяются кастомные или веб-шрифты (например, Google Fonts), они могут не загрузиться к моменту создания скриншота. Убедитесь, что шрифты подключены и полностью загружены перед вызовом html2canvas. Используйте событие document.fonts.ready для ожидания.

2. Проблемы с CSS-свойствами текста

Некоторые CSS-свойства, такие как text-shadow, background-clip: text или -webkit-text-fill-color, могут сбрасываться или игнорироваться html2canvas. Рекомендуется использовать стандартные стили: color, font-size, font-family без префиксов.

3. Ошибки в разметке и контейнерах

Если текст находится внутри элемента с неправильными размерами (высота равна 0) или скрыт через display: none, html2canvas не сможет его захватить. Проверьте, что контейнер divToPrint имеет достаточную высоту и видимость.

4. Версия библиотек и их совместимость

Используйте актуальные версии html2canvas (1.4.1+) и jsPDF (2.5.1+). В старых релизах были баги с рендерингом текста. Также избегайте конфликтов с другими библиотеками, которые модифицируют DOM.

Пошаговое решение: как исправить проблему

Следуйте этим шагам, чтобы гарантированно отобразить текст в PDF:

• Шаг 1. Подождите загрузки шрифтов: await document.fonts.ready; перед вызовом html2canvas.
• Шаг 2. Убедитесь, что все текстовые элементы имеют явно заданные font-family (например, Arial или sans-serif) и color.
• Шаг 3. Используйте опцию useCORS: true в html2canvas, если подгружаете внешние ресурсы.
• Шаг 4. Проверьте, что контейнер не имеет overflow: hidden и его размеры корректны.
• Шаг 5. Обновите библиотеки до последних версий и перезапустите сборку проекта.

Пример рабочего кода с исправлением

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

const printDocument = async () => {   await document.fonts.ready;   const input = document.getElementById('divToPrint');   html2canvas(input, { useCORS: true }).then((canvas) => {     const imgData = canvas.toDataURL('image/png');     const pdf = new jsPDF();     pdf.addImage(imgData, 'JPEG', 0, 0);     pdf.save('download.pdf');   }); };

Альтернативные методы создания PDF с текстом

Если html2canvas продолжает терять текст, рассмотрите другие подходы:

• html-to-pdfmake - конвертирует HTML в структуру pdfmake, поддерживает текст нативно.
• Puppeteer - генерирует PDF на серверной стороне с полной поддержкой CSS.
• jsPDF с прямым добавлением текста - используйте pdf.text() для добавления текста поверх скриншота.

Выбор метода зависит от сложности макета и требований к точности. Для простых документов достаточно доработать html2canvas, как описано выше.