PDF.js в Joomla: отрисовка PDF в Canvas

Подключение PDF.js и подготовка Canvas

Зарегистрируйте собственный модуль с зависимостью от выбранного ассета. В примере core нужен для Joomla.getOptions(). Данные передаются через addScriptOptions(). HTML-документ должен выводить стандартные секции scripts Joomla. Путь к вашему .mjs задан от корня сайта через Uri::root(true), поскольку стандартный WebAssetItem Joomla не дополняет пути .mjs автоматически. Версию собственного ассета меняйте при изменении файла для обновления кэша. Начальные ES-модули завершаются до DOMContentLoaded; обработчик ждёт это событие. Для кода, добавляемого после события, используйте явный import() и ожидайте его завершения.

Пример рисует первую страницу с учётом плотности пикселей. Такой предпросмотр выводит изображение страницы; текстовый слой, поиск и интерфейс аннотаций в примере не реализованы. Для нескольких экземпляров используйте уникальные script options и ID, обработку каждого контейнера. Для интерактивного приложения адаптируйте загрузку, рендер и очистку.

Пример PHP

<?php
use Joomla\CMS\Factory;
use Joomla\CMS\Uri\Uri;
$document = Factory::getApplication()->getDocument();
$wa = $document->getWebAssetManager();
$document->addScriptOptions('wtpdf-demo', [
    'url' => Uri::root(true) . '/images/documents/catalog.pdf',
    'canvasId' => 'wtpdf-canvas',
    'errorId' => 'wtpdf-error',
    'cMapUrl' => Uri::root(true) . '/media/plg_system_wtpdfjs/viewer/modern/web/cmaps/',
    'standardFontDataUrl' => Uri::root(true) . '/media/plg_system_wtpdfjs/viewer/modern/web/standard_fonts/',
    'wasmUrl' => Uri::root(true) . '/media/plg_system_wtpdfjs/viewer/modern/web/wasm/',
    'iccUrl' => Uri::root(true) . '/media/plg_system_wtpdfjs/viewer/modern/web/iccs/',
]);
$wa->registerAndUseScript(
    'com_example.pdf-preview',
    Uri::root(true) . '/media/com_example/js/pdf-preview.mjs',
    ['version' => '1.0.0'],
    ['type' => 'module'],
    ['core', 'wt-pdf-js']
);
?>
<canvas id="wtpdf-canvas" aria-label="PDF preview"></canvas>
<p id="wtpdf-error" role="status"></p>

Пример JavaScript 2

// media/com_example/js/pdf-preview.mjs
window.addEventListener('DOMContentLoaded', async () => {
    const options = Joomla.getOptions('wtpdf-demo');
    const canvas = document.getElementById(options.canvasId);
    const error = document.getElementById(options.errorId);
    if (!canvas) return;
    let loadingTask;
    try {
        loadingTask = globalThis.pdfjsLib.getDocument({
            url: options.url,
            cMapUrl: options.cMapUrl,
            cMapPacked: true,
            standardFontDataUrl: options.standardFontDataUrl,
            wasmUrl: options.wasmUrl,
            iccUrl: options.iccUrl,
        });
        const pdf = await loadingTask.promise;
        const page = await pdf.getPage(1);
        const viewport = page.getViewport({ scale: 1.25 });
        const ratio = window.devicePixelRatio || 1;
        canvas.width = Math.ceil(viewport.width * ratio);
        canvas.height = Math.ceil(viewport.height * ratio);
        canvas.style.width = viewport.width + 'px';
        canvas.style.height = viewport.height + 'px';
        await page.render({
            canvasContext: canvas.getContext('2d'),
            viewport,
            transform: ratio === 1 ? null : [ratio, 0, 0, ratio, 0, 0],
        }).promise;
    } catch (exception) {
        if (error) error.textContent = exception.message;
    } finally {
        if (loadingTask) await loadingTask.destroy();
    }
}, { once: true });

Для старых браузеров замените зависимость на wt-pdf-js-legacy и пути ресурсов viewer/modern/ на viewer/legacy/. Для CDN используйте wt-pdf-js-latest; CMaps, шрифты, WASM и ICC должны соответствовать фактической CDN-версии. Локальные ресурсы примера рассчитаны на 6.4.299.

PDF.js 6 ожидает объект в getDocument({ url: ... }). Инициализаторы сохраняют совместимость строкового pdfjsLib.getDocument(url), но новый код пишите с объектом. Параметры загрузки PDF не являются JSON-профилем viewer.