--- title: "PDF.js в Joomla: отрисовка PDF в Canvas - WebTolk" description: "Зарегистрируйте собственный модуль с зависимостью от выбранного ассета. В примере core нужен для Joomla.getOptions() . Данные передаются через…" url: "https://web-tolk.ru/dev/joomla-plugins/wt-pdf-js/documentation/canvas-rendering" date: "2026-10-09T20:16:33+00:00" language: "ru-RU" --- ## Breadcrumbs [Главная](https://web-tolk.ru/) > [Расширения Joomla](https://web-tolk.ru/dev) > [Плагины Joomla](/dev/joomla-plugins) > [WT PDF.js](/dev/joomla-plugins/wt-pdf-js) > [Документация](/dev/joomla-plugins/wt-pdf-js/documentation) > PDF.js в Joomla: отрисовка PDF в Canvas # PDF.js в Joomla: отрисовка PDF в Canvas WT PDF.js - Документация **Категория:** [Плагины Joomla](https://web-tolk.ru/dev/joomla-plugins) [Проект](https://web-tolk.ru/dev/joomla-plugins/wt-pdf-js)[Версии](https://web-tolk.ru/dev/joomla-plugins/wt-pdf-js/versions)[Документация](https://web-tolk.ru/dev/joomla-plugins/wt-pdf-js/documentation)[GitHub](https://github.com/mozilla/pdf.js) Зарегистрируйте собственный модуль с зависимостью от выбранного ассета. ## Подключение PDF.js и подготовка Canvas Зарегистрируйте собственный модуль с зависимостью от выбранного ассета. В примере `core` нужен для `Joomla.getOptions()`. Данные передаются через `addScriptOptions()`. HTML-документ должен выводить стандартные секции scripts Joomla. Путь к вашему .mjs задан от корня сайта через Uri::root(true), поскольку стандартный WebAssetItem Joomla не дополняет пути .mjs автоматически. Версию собственного ассета меняйте при изменении файла для обновления кэша. Начальные ES-модули завершаются до `DOMContentLoaded`; обработчик ждёт это событие. Для кода, добавляемого после события, используйте явный `import()` и ожидайте его завершения. Пример рисует первую страницу с учётом плотности пикселей. Такой предпросмотр выводит изображение страницы; текстовый слой, поиск и интерфейс аннотаций в примере не реализованы. Для нескольких экземпляров используйте уникальные script options и ID, обработку каждого контейнера. Для интерактивного приложения адаптируйте загрузку, рендер и очистку. ### Пример PHP ``` 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'] ); ?>

``` ### Пример 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. ## JSON-LD Schema ```json { "@context": "https://schema.org", "@type": "BreadcrumbList", "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17", "itemListElement": [ { "@type": "ListItem", "position": 1, "item": { "@id": "https://web-tolk.ru/", "name": "Главная" } }, { "@type": "ListItem", "position": 2, "item": { "@id": "https://web-tolk.ru/dev", "name": "Расширения Joomla" } }, { "@type": "ListItem", "position": 3, "item": { "@id": "/dev/joomla-plugins", "name": "Плагины Joomla" } }, { "@type": "ListItem", "position": 4, "item": { "@id": "/dev/joomla-plugins/wt-pdf-js", "name": "WT PDF.js" } }, { "@type": "ListItem", "position": 5, "item": { "@id": "/dev/joomla-plugins/wt-pdf-js/documentation", "name": "Документация" } }, { "@type": "ListItem", "position": 6, "item": { "name": "PDF.js в Joomla: отрисовка PDF в Canvas" } } ] } ``` ```json { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://web-tolk.ru/#/schema/Organization/base", "name": "WebTolk", "url": "https://web-tolk.ru/", "logo": { "@type": "ImageObject", "@id": "https://web-tolk.ru/#/schema/ImageObject/logo", "url": "https://web-tolk.ru/images/webtolk-1080p.jpg", "contentUrl": "https://web-tolk.ru/images/webtolk-1080p.jpg", "width": 1920, "height": 1080 }, "image": { "@id": "https://web-tolk.ru/#/schema/ImageObject/logo" }, "sameAs": [ "https://github.com/WebTolk", "https://github.com/sergeytolkachyov", "https://vk.com/web_tolk", "https://vk.com/webtolkru", "https://tenchat.ru/sergeytolkachyov", "https://t.me/sergeytolkachyov", "https://t.me/webtolkru" ] }, { "@type": "WebSite", "@id": "https://web-tolk.ru/#/schema/WebSite/base", "url": "https://web-tolk.ru/", "name": "WebTolk", "publisher": { "@id": "https://web-tolk.ru/#/schema/Organization/base" } }, { "@type": "WebPage", "@id": "https://web-tolk.ru/#/schema/WebPage/base", "url": "https://web-tolk.ru/dev/joomla-plugins/wt-pdf-js/documentation/canvas-rendering", "name": "PDF.js в Joomla: отрисовка PDF в Canvas - WebTolk", "description": "Зарегистрируйте собственный модуль с зависимостью от выбранного ассета. В примере core нужен для Joomla.getOptions() . Данные передаются через…", "isPartOf": { "@id": "https://web-tolk.ru/#/schema/WebSite/base" }, "about": { "@id": "https://web-tolk.ru/#/schema/TechArticle/base" }, "inLanguage": "ru-RU", "breadcrumb": { "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17" } }, { "@type": "TechArticle", "headline": "PDF.js в Joomla: отрисовка PDF в Canvas", "url": "https://web-tolk.ru/dev/joomla-plugins/wt-pdf-js/documentation/canvas-rendering", "description": "Зарегистрируйте собственный модуль с зависимостью от выбранного ассета.", "mainEntityOfPage": { "@type": "WebPage", "url": "https://web-tolk.ru/dev/joomla-plugins/wt-pdf-js/documentation/canvas-rendering" } } ] } ```