Преобразование Word в PDF в JavaScript (Полное руководство)

В современных веб-приложениях функции обработки документов становятся всё более востребованными. Будь то создание отчётов, экспорт контрактов или обработка загруженных пользователем документов — преобразование Word в PDF является одной из самых распространённых задач. В этой статье мы подробно рассмотрим, как выполнить высококачественное преобразование Word в PDF в приложениях React с использованием библиотеки Spire.Doc for JavaScript.

Почему стоит выбрать Spire.Doc for JavaScript?

Существует множество вариантов для преобразования документов на фронтенде, но Spire.Doc for JavaScript имеет несколько явных преимуществ:

1. Не требует бэкенд-сервера: всё преобразование выполняется на стороне клиента, что защищает конфиденциальность пользовательских данных
2. Высокое качество рендеринга: идеально сохраняет форматирование, шрифты и макет исходного документа
3. Богатая функциональность: поддерживает не только преобразование, но и создание, редактирование и управление Word-документами
4. Кроссплатформенная совместимость: работает на WebAssembly и плавно функционирует в основных браузерах

Инициализация проекта

Сначала установите Spire.Office в свой React-проект:

Разбор основной реализации

1. Загрузка WASM-модуля

Spire.Doc работает на базе WebAssembly, поэтому сначала необходимо загрузить основной модуль. Здесь используется хук React useEffect для асинхронной загрузки при монтировании компонента:

useEffect(() => {

(async () => {

try {

const publicUrl = process.env.PUBLIC_URL || ’’;

const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.doc.js`);

const rawModule = spireModule.default || spireModule;

window.wasmModule = typeof rawModule === ’function’

? await rawModule({ locateFile: p => p.endsWith(’.wasm’) ? `${publicUrl}/${p}` : p })

: rawModule;

setWasmModule(window.wasmModule);

} catch (error) {

console.error(’Failed to load spire.doc.js WASM module:’, error);

}

})();

}, []);

Пояснение ключевых моментов:

1. webpackIgnore: true гарантирует, что webpack не обрабатывает этот динамический импорт, избегая ошибок в путях к ресурсам
2. Функция locateFile указывает путь загрузки WASM-файлов
3. После успешной загрузки модуль сохраняется в состоянии для управления доступностью кнопки

2. Управление шрифтами

Шрифты — это наиболее частый источник проблем при преобразовании документов. Spire.Doc требует загрузки шрифтов в виртуальную файловую систему (VFS) для корректного отображения PDF:

// Загрузка семейства шрифтов Times New Roman

await window.spire.FetchFileToVFS(’times.ttf’, ’/Library/Fonts/’, `${process.env.PUBLIC_URL}/static/font/`);

await window.spire.FetchFileToVFS(’timesbd.ttf’, ’/Library/Fonts/’, `${process.env.PUBLIC_URL}/static/font/`);

await window.spire.FetchFileToVFS(’timesbi.ttf’, ’/Library/Fonts/’, `${process.env.PUBLIC_URL}/static/font/`);

await window.spire.FetchFileToVFS(’timesi.ttf’, ’/Library/Fonts/’, `${process.env.PUBLIC_URL}/static/font/`);

Рекомендации по лучшей практике:

1. Размещайте часто используемые шрифты в каталоге public/static/font/
2. Выборочно загружайте шрифты в зависимости от фактически используемых в документе, чтобы сократить время загрузки
3. Для документов на китайском языке необходимо загружать китайские шрифты (например, SimSun, SimHei и т.д.)

3. Основной процесс преобразования документов

Полный процесс преобразования включает следующие шаги:

// 1. Загрузка Word-документа в VFS

await window.spire.FetchFileToVFS(inputFileName, ’’, `${process.env.PUBLIC_URL}/static/data/`);

// 2. Создание экземпляра Document и загрузка документа

const doc = new wasmModule.Document();

doc.LoadFromFile(inputFileName);

// 3. Настройка параметров преобразования

let parameters = new wasmModule.ToPdfParameterList();

parameters.IsEmbeddedAllFonts = true; // Внедрение всех шрифтов для единообразного отображения на разных устройствах

// 4. Выполнение преобразования и сохранение

const outputFileName = ’ToPDF.pdf’;

doc.SaveToFile({ fileName: outputFileName, paramList: parameters });

// 5. Чтение сгенерированного файла

const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);

const modifiedFile = new Blob([modifiedFileArray], { type: ’application/pdf’ });

4. Скачивание файла и очистка ресурсов

После создания PDF создайте ссылку для скачивания и очистите ресурсы:

// Создание ссылки для скачивания

const url = URL.createObjectURL(modifiedFile);

const a = document.createElement(’a’);

a.href = url;

a.download = outputFileName;

document.body.appendChild(a);

a.click();

// Очистка ресурсов

document.body.removeChild(a);

URL.revokeObjectURL(url);

doc.Dispose(); // Освобождение объекта документа

Полный пример компонента

Объединив все вышеперечисленные шаги, получаем полноценный React-компонент:

Рекомендации по оптимизации производительности

1. Кеширование шрифтов: кешируйте часто используемые шрифты в IndexedDB, чтобы избежать повторной загрузки
2. Индикаторы прогресса: используйте анимации загрузки или индикаторы прогресса для больших файлов, чтобы улучшить пользовательский опыт
3. Обработка ошибок: полноценные блоки try-catch с понятными для пользователя сообщениями об ошибках
4. Управление памятью: своевременно вызывайте Dispose() для освобождения ресурсов

Часто задаваемые вопросы и решения

Вопрос: В преобразованном PDF китайский текст отображается как "кракозябры"?Ответ: Убедитесь, что загружены соответствующие китайские шрифты и в параметрах преобразования установлено IsEmbeddedAllFonts = true.

Вопрос: Не удаётся загрузить WASM-модуль?Ответ: Проверьте, что файлы spire.doc.js и spire.doc.wasm присутствуют в каталоге public, и что конфигурация путей корректна.

Вопрос: Браузер зависает при преобразовании больших файлов?Ответ: Используйте Web Workers для выгрузки задачи преобразования в фоновый поток.

Заключение

С помощью Spire.Doc for JavaScript мы можем выполнять профессиональное преобразование Word в PDF полностью в среде фронтенда. Предложенное в этой статье решение не только отличается лаконичностью кода, но и включает лучшие практики управления шрифтами, обработки ошибок и очистки ресурсов, готовые к использованию в производственной среде.

Этот подход с преобразованием на стороне клиента особенно подходит для:

1. Корпоративных приложений, которым требуется защита конфиденциальности данных
2. Веб-приложений с приоритетом работы в офлайн-режиме
3. Сценариев, где требуется снизить нагрузку на сервер

Надеемся, что эта статья поможет вам успешно реализовать функцию преобразования документов в ваших проектах. Если у вас есть вопросы или предложения, добро пожаловать в обсуждение в комментариях!