Приключения в Аурелии: создание пользовательского средства просмотра PDF

Загрузка и отображение PDF будет зависеть от наших привязываемых атрибутов; в этом случае это будет атрибут url . По сути, когда URL-адрес изменяется, пользовательский элемент должен попросить PDF.js сделать запрос на файл. Мы сделаем это в нашем обработчике urlChanged с некоторыми изменениями в нашем конструкторе, чтобы инициализировать некоторые свойства и некоторые изменения в нашем detached методе для целей очистки.

Для каждой страницы нашего документа мы создадим элемент <canvas> в DOM, размещенный внутри прокручиваемого контейнера с фиксированной высотой. Чтобы реализовать это, мы будем использовать базовую функциональность шаблонов Aurelia, используя ретранслятор . Поскольку каждая страница PDF может иметь свой собственный размер и ориентацию, мы установим ширину и высоту каждого элемента холста на основе области просмотра страницы PDF.

Вот наш взгляд:

 // src/resources/elements/pdf-document.html <template> <require from="./pdf-document.css"></require> <div ref="container" id.bind="fingerprint" class="pdf-container"> <div repeat.for="page of lastpage" class="text-center"> <canvas id="${fingerprint}-page${(page + 1)}"></canvas> </div> </div> </template> 

После того, как мы загрузили наш PDF-документ, нам нужно получить размеры каждой страницы в PDF, чтобы мы могли сопоставить каждый размер canvas размером его страницы. (Выполнение этого в данный момент позволяет нам настроить наш просмотрщик для прокрутки; если бы мы не сделали этого сейчас, у нас не было бы правильной высоты для каждой страницы.) Итак, после загрузки каждой страницы мы ставим задачу в измените размер элемента canvas, используя абстракцию Aurelia TaskQueue . (Это сделано из соображений производительности DOM. Подробнее о микротрассах вы можете прочитать здесь ).

Вот наша ViewModel:

 // src/resources/elements/pdf-document.js import {customElement, bindable, bindingMode, inject, Loader} from 'aurelia-framework'; import {TaskQueue} from 'aurelia-task-queue'; import {PDFJS} from 'pdfjs-dist'; @customElement('pdf-document') ... // all of our @bindables @inject(Loader, TaskQueue) export class PdfDocument { constructor (loader, taskQueue) { PDFJS.workerSrc = loader.normalizeSync('pdfjs-dist/build/pdf.worker.js'); this.worker = new PDFJS.PDFWorker(); // Hold a reference to the task queue for later use. this.taskQueue = taskQueue; // Add a promise property. this.resolveDocumentPending; // Add a fingerprint property to uniquely identify our DOM nodes. // This allows us to create multiple viewers without issues. this.fingerprint = generateUniqueDomId(); this.pages = []; this.currentPage = null; } urlChanged (newValue, oldValue) { if (newValue === oldValue) return; // Load our document and store a reference to PDF.js' loading promise. var promise = this.documentPending || Promise.resolve(); this.documentPending = new Promise((resolve, reject) => { this.resolveDocumentPending = resolve.bind(this); }); return promise .then((pdf) => { if (pdf) { pdf.destroy(); } return PDFJS.getDocument({ url: newValue, worker: this.worker }); }) .then((pdf) => { this.lastpage = pdf.numPages; pdf.cleanupAfterRender = true; // Queue loading of all of our PDF pages so that we can scroll through them later. for (var i = 0; i < pdf.numPages; i++) { this.pages[i] = pdf.getPage(Number(i + 1)) .then((page) => { var viewport = page.getViewport(this.scale); var element = document.getElementById(`${this.fingerprint}-page${page.pageNumber}`); // Update page canvas elements to match viewport dimensions. // Use Aurelia's TaskQueue to batch the DOM changes. this.taskQueue.queueMicroTask(() => { element.height = viewport.height; element.width = viewport.width; }); return { element: element, page: page, rendered: false, clean: false }; }); } // For the initial render, check to see which pages are currently visible, and render them. /* Not implemented yet. */ this.resolveDocumentPending(pdf); }); } detached () { // Destroy our PDF worker asynchronously to avoid any race conditions. return this.documentPending .then((pdf) => { if (pdf) { pdf.destroy(); } this.worker.destroy(); }) .catch(() => { this.worker.destroy(); }); } } // Generate unique ID values to avoid any DOM conflicts and allow multiple PDF element instances. var generateUniqueDomId = function () { var S4 = function() { return (((1 + Math.random()) * 0x10000) | 0) .toString(16) .substring(1); }; return `_${S4()}${S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`; } , // src/resources/elements/pdf-document.js import {customElement, bindable, bindingMode, inject, Loader} from 'aurelia-framework'; import {TaskQueue} from 'aurelia-task-queue'; import {PDFJS} from 'pdfjs-dist'; @customElement('pdf-document') ... // all of our @bindables @inject(Loader, TaskQueue) export class PdfDocument { constructor (loader, taskQueue) { PDFJS.workerSrc = loader.normalizeSync('pdfjs-dist/build/pdf.worker.js'); this.worker = new PDFJS.PDFWorker(); // Hold a reference to the task queue for later use. this.taskQueue = taskQueue; // Add a promise property. this.resolveDocumentPending; // Add a fingerprint property to uniquely identify our DOM nodes. // This allows us to create multiple viewers without issues. this.fingerprint = generateUniqueDomId(); this.pages = []; this.currentPage = null; } urlChanged (newValue, oldValue) { if (newValue === oldValue) return; // Load our document and store a reference to PDF.js' loading promise. var promise = this.documentPending || Promise.resolve(); this.documentPending = new Promise((resolve, reject) => { this.resolveDocumentPending = resolve.bind(this); }); return promise .then((pdf) => { if (pdf) { pdf.destroy(); } return PDFJS.getDocument({ url: newValue, worker: this.worker }); }) .then((pdf) => { this.lastpage = pdf.numPages; pdf.cleanupAfterRender = true; // Queue loading of all of our PDF pages so that we can scroll through them later. for (var i = 0; i < pdf.numPages; i++) { this.pages[i] = pdf.getPage(Number(i + 1)) .then((page) => { var viewport = page.getViewport(this.scale); var element = document.getElementById(`${this.fingerprint}-page${page.pageNumber}`); // Update page canvas elements to match viewport dimensions. // Use Aurelia's TaskQueue to batch the DOM changes. this.taskQueue.queueMicroTask(() => { element.height = viewport.height; element.width = viewport.width; }); return { element: element, page: page, rendered: false, clean: false }; }); } // For the initial render, check to see which pages are currently visible, and render them. /* Not implemented yet. */ this.resolveDocumentPending(pdf); }); } detached () { // Destroy our PDF worker asynchronously to avoid any race conditions. return this.documentPending .then((pdf) => { if (pdf) { pdf.destroy(); } this.worker.destroy(); }) .catch(() => { this.worker.destroy(); }); } } // Generate unique ID values to avoid any DOM conflicts and allow multiple PDF element instances. var generateUniqueDomId = function () { var S4 = function() { return (((1 + Math.random()) * 0x10000) | 0) .toString(16) .substring(1); }; return `_${S4()}${S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`; } 

Сохраните свою работу, и Gulp должен перерисовать страницу. Вы заметите, что контейнер показывает правильное количество страниц для соответствующих PDF-файлов. Единственная проблема в том, что они пустые. Давайте это исправим!

Рендеринг наших страниц

Теперь, когда мы загрузили наши страницы, нам нужно отобразить их в элемент DOM. Для этого мы будем полагаться на функциональность рендеринга PDF.js. Библиотека просмотра PDF.js имеет асинхронный API, предназначенный для отображения страниц; На их сайте есть отличный пример, который показывает, как создать объект renderContext и передать его в метод рендеринга renderContext Мы возьмем этот код из примера и обернем его внутри функции рендеринга:

SRC / ресурсы / элементы / PDF-document.js

 ... export class PdfDocument { ... } var generateUniqueDomId = function () { ... } var render = function (renderPromise, scale) { return Promise.resolve(renderPromise) .then((renderObject) => { if (renderObject.rendered) return Promise.resolve(renderObject); renderObject.rendered = true; var viewport = renderObject.page.getViewport(scale); var context = renderObject.element.getContext('2d'); return renderObject.page.render({ canvasContext: context, viewport: viewport }) .promise.then(() => { return renderObject; }); }); }; 

Рендеринг в PDF.JS несколько дорогой. Таким образом, мы хотим ограничить нагрузку; мы хотим отображать только то, что в данный момент видимо, поэтому мы будем ограничивать отображение только теми страницами, которые находятся внутри видимой границы, а не отображать все сразу Мы сделаем простую математику, чтобы проверить, что находится в окне просмотра:

 // src/resources/elements/pdf-document.js export class PdfDocument { ... } var generateUniqueDomId = function () { ... } var render = function (...) { ... } var checkIfElementVisible = function (container, element) { var containerBounds = { top: container.scrollTop, bottom: container.scrollTop + container.clientHeight }; var elementBounds = { top: element.offsetTop, bottom: element.offsetTop + element.clientHeight }; return (!((elementBounds.bottom < containerBounds.top && elementBounds.top < containerBounds.top) || (elementBounds.top > containerBounds.bottom && elementBounds.bottom > containerBounds.bottom))); } 

Когда мы впервые загружаем документ и когда выполняем прокрутку, мы запускаем эти проверки области просмотра. Теперь, при загрузке, мы просто визуализируем то, что видимо, вот так.

 // src/resources/elements/pdf-document.js export class PdfDocument { ... urlChanged (newValue, oldValue) { ... // For the initial render, check to see which pages are currently visible, and render them. this.pages.forEach((page) => { page.then((renderObject) => { if (checkIfElementVisible(this.container, renderObject.element)) { if (renderObject.rendered) return; render(page, this.scale); } }); }); this.resolveDocumentPending(pdf); }); } 

Перезагрузите приложение, и вы увидите, что отображается первая страница каждого файла PDF.

Реализация прокрутки

Чтобы обеспечить знакомый и понятный интерфейс, наш компонент должен отображать страницы в виде отдельных частей полностью прокручиваемого документа. Мы можем добиться этого, сделав наш контейнер фиксированной высоты с прокруткой через CSS.

Чтобы максимизировать производительность с большими документами, мы сделаем несколько вещей. Во-первых, мы будем использовать TaskQueue Aurelia для пакетных изменений в DOM. Во-вторых, мы будем отслеживать страницы, которые PDF.js уже отредактировал, поэтому он не должен повторять работу, которая уже сделана. Наконец, мы будем отображать видимые страницы только после остановки прокрутки, используя поведение привязки debounce Aurelia. Это метод, который мы будем запускать при прокрутке:

 // src/resources/elements/pdf-document.js export class PdfDocument { ... renderHandler () { Promise.all(this.pages) .then((values) => { values.forEach((renderObject) => { if (!renderObject) return; if (!checkIfElementVisible(this.container, renderObject.element)) { if (renderObject.rendered && renderObject.clean) { renderObject.page.cleanup(); renderObject.clean = true; } return; } this.taskQueue.queueMicroTask(() => { if (renderObject.rendered) return; render(renderObject, this.scale); }); }); }); } ... } 

 // src/resources/elements/pdf-document.html <template> <require from="./pdf-document.css"></require> <div ref="container" id.bind="fingerprint" class="pdf-container" scroll.trigger="pageHandler()" scroll.trigger2="renderHandler() & debounce:100"> <div repeat.for="page of lastpage" class="text-center"> <canvas id="${fingerprint}-page${(page + 1)}"></canvas> </div> </div> </template> 

 export class PdfDocument { ... // If the page changes, scroll to the associated element. pageChanged (newValue, oldValue) { if (newValue === oldValue || isNaN(Number(newValue)) || Number(newValue) > this.lastpage || Number(newValue) < 0) { this.page = oldValue; return; } // Prevent scroll update collisions with the pageHandler method. if (Math.abs(newValue - oldValue) <= 1) return; this.pages[newValue - 1] .then((renderObject) => { this.container.scrollTop = renderObject.element.offsetTop; render(this.pages[newValue - 1], this.scale); }); } ... // Change the current page number as we scroll. pageHandler () { this.pages.forEach((page) => { page.then((renderObject) => { if ((this.container.scrollTop + this.container.clientHeight) >= renderObject.element.offsetTop && (this.container.scrollTop <= renderObject.element.offsetTop)) { this.page = renderObject.page.pageNumber; } }); }); } ... } 

 import {SyntaxInterpreter} from 'aurelia-templating-binding'; SyntaxInterpreter.prototype.trigger2 = SyntaxInterpreter.prototype.trigger; 

 // src/resources/elements/pdf-document.js export class PdfDocument { ... scaleChanged (newValue, oldValue) { if (newValue === oldValue || isNaN(Number(newValue))) return; Promise.all(this.pages) .then((values) => { values.forEach((renderObject) => { if (!renderObject) return; var viewport = renderObject.page.getViewport(newValue); renderObject.rendered = false; this.taskQueue.queueMicroTask(() => { renderObject.element.height = viewport.height; renderObject.element.width = viewport.width; if (renderObject.page.pageNumber === this.page) { this.container.scrollTop = renderObject.element.offsetTop; } }); }); return values; }) .then((values) => { this.pages.forEach((page) => { page.then((renderObject) => { this.taskQueue.queueMicroTask(() => { if (checkIfElementVisible(this.container, renderObject.element)) { render(page, this.scale); } }); }); }); }); } ... }