Abenteuer in Aurelia: Erstellen eines benutzerdefinierten PDF -Viewers

Dieser Artikel wurde von Vildan Softic überprüft. Vielen Dank an alle Peer -Rezensenten bei SitePoint für die Erhöhung der Inhalte von SitePoint -Inhalten!

PDF -Dateien in Webanwendungen verarbeiten war schon immer sehr schwierig. Wenn Sie Glück haben, müssen Ihre Benutzer die Datei nur herunterladen. Aber manchmal brauchen Benutzer mehr Funktionen. Ich hatte in der Vergangenheit Glück, aber diesmal benötigen unsere Benutzer die App, um PDF -Dokumente anzuzeigen, damit sie Metadaten für jede Seite speichern können. Zuvor haben Menschen möglicherweise teure PDF -Plugins (wie Adobe Reader) verwendet, um dies im Browser zu laufen, um dies zu erreichen. Nach einiger Zeit und Experimenten fand ich jedoch eine bessere Möglichkeit, einen PDF -Viewer in meine Webanwendung zu integrieren. Heute lernen wir, wie die PDF -Verarbeitung mit Aurelia und PDF.Js. vereinfacht wird.

Kernpunkte

• Verwenden Sie Aurelia und PDF.js, um einen benutzerdefinierten, effizienten PDF -Viewer mit Funktionen wie Skalierung und Scrollen zu erstellen, um die Benutzerinteraktion und -leistung zu verbessern.
• Implementieren Sie die Zwei-Wege-Datenbindung für Attribute wie aktuelle Seite und Zoomebene in Aurelia, sodass die nahtlose Integration und dynamische Aktualisierungen in die Anwendung ermöglicht werden können.
• Entwickeln Sie den PDF -Viewer in wiederverwendbare Aurelia -benutzerdefinierte Elemente, mit denen Sie ohne Konflikt mehrere Zuschauer zu Ihrer Anwendung hinzufügen können.
• Verwenden Sie PDF.js, um das PDF -Rendering zu verarbeiten, asynchrone Operationen zu unterstützen und Webarbeiter zu deinstallieren und die UI -Reaktionsgeschwindigkeit zu verbessern.
• Besprechen Sie potenzielle Leistungsprobleme durch Berücksichtigung des virtuellen Scrollens und anderer Optimierungen, insbesondere bei der effektiven Umstellung großer Dokumente.
• Erforschen Sie die Möglichkeit, einen benutzerdefinierten PDF -Viewer in ein Aurelia -Plugin umzuwandeln, um es einfach zu integrieren, in andere Projekte und Anwendungen zu integrieren.

Übersicht: Ziel

Unser Ziel heute ist es, eine PDF-Viewer-Komponente in Aurelia zu erstellen, die einen Zwei-Wege-Datenfluss zwischen dem Betrachter und unserer Anwendung ermöglicht. Wir haben drei Hauptanforderungen:

1. wir möchten, dass Benutzer Dokumente laden, scrollen und mit guter Leistung ein-/ausgehen können.
2. Wir möchten in der Lage sein, die Eigenschaften der Zuschauer (wie die aktuelle Seite und die aktuelle Zoomebene) an Eigenschaften in der Anwendung zu binden.
3. wir möchten, dass dieser Betrachter eine wiederverwendbare Komponente ist.

Sie finden den Code für dieses Tutorial in unserem GitHub -Repository sowie eine Demo des fertiggestellten Code hier.

Einführung pdf.js

pdf.js ist eine von der Mozilla Foundation geschriebene JavaScript -Bibliothek. Es lädt PDF -Dokumente, Parse -Dateien und verwandte Metadaten und rendert die Seitenausgabe in den DOM -Knoten (normalerweise <canvas></canvas> Element). Der im Projekt enthaltene Standard -Zuschauer bietet Unterstützung für eingebettete PDF -Zuschauer in Chrome und Firefox und kann als eigenständige Seiten oder Ressourcen (in IFrames eingebettet) verwendet werden.

Das ist wirklich cool. Das Problem hierfür ist, dass der Standard -Betrachter, obwohl er viele Funktionen hat, als eigenständige Webseite entwickelt wurde. Dies bedeutet, dass es zwar in eine Webanwendung integriert werden kann, es im Grunde genommen in einer Iframe -Sandbox ausgeführt werden muss. Der Standard -Viewer ist so konzipiert, dass die Konfigurationseingabe über seine Abfragezeichenfolge abgerufen wird. Wir können jedoch die Konfiguration nach dem ersten Laden nicht einfach ändern, und wir können auch nicht einfach Informationen und Ereignisse vom Betrachter erhalten. Um es in die Aurelia-Webanwendung zu integrieren-einschließlich der Handhabung und einer Zwei-Wege-Bindung-müssen wir eine benutzerdefinierte Aurelia-Komponente erstellen.

Hinweis: Wenn Sie eine Bewertung zu PDF.js benötigen, lesen Sie bitte unser Tutorial: Benutzerdefiniertes PDF -Rendering in JavaScript unter Verwendung von Mozilla PDF.JS

Implementierung

Um unser Ziel zu erreichen, werden wir ein Aurelia -benutzerdefiniertes Element erstellen. Wir werden den Standardbetrachter jedoch nicht in unsere Komponenten einfügen. Stattdessen erstellen wir unseren eigenen Betrachter, der eine Verbindung zum PDF.JS -Kern- und Viewer -Bibliothek herstellt, damit wir die Kontrolle über unsere verbindlichen Eigenschaften und Renderings maximieren können. Für unseren ersten Proof of Concept werden wir mit der Aurelia Skeleton -Anwendung beginnen.

fotoscope Code

Wie Sie aus dem obigen Link sehen können, enthält die Skeleton -Anwendung viele Dateien, von denen viele nicht benötigt werden. Um die Operationen zu vereinfachen, haben wir eine optimierte Version des Skeletts erstellt und einige Inhalte hinzugefügt:

• Eine Gulp -Aufgabe zum Kopieren unserer PDF -Dateien in den DIST -Ordner (Aurelia wird zum Bündeln verwendet).
• pdf.js Abhängigkeit wurde zu package.json hinzugefügt.
• im Anwendungsroot -Verzeichnis haben Index.html und Index.css einige anfängliche Stileinstellungen erfahren.
• Die leere Kopie der Datei, die wir verwenden werden, wurde hinzugefügt.
• Die Datei SRC/Ressourcen/Elemente/pdf-dokument.css enthält einige CSS-Stile für benutzerdefinierte Elemente.

Lassen Sie uns die Anwendung zum Laufen bringen.

Stellen Sie zunächst sicher, dass Gulp und JSPM global installiert sind:

npm install -g gulp jspm

dann klonen Sie das Skelett und geben Sie es ein:

git clone git@github.com:sitepoint-editors/aurelia-pdfjs.git -b skeleton
cd aurelia-pdfjs

dann die erforderlichen Abhängigkeiten installieren:

npm install
jspm install -y

Führen Sie schließlich die Gulp -Uhr aus und navigieren Sie zu http: // localhost: 9000. Wenn alles nach Plan verläuft, sollten Sie eine willkommene Nachricht sehen.

Weitere Einstellungen

Als nächstes finden Sie ein paar PDF -Dateien und setzen Sie sie in SRC/Dokumente ein. Nennen Sie sie ein.pdf und zwei.pdf. Um das Testen unserer benutzerdefinierten Komponenten zu maximieren, ist es am besten, dass eine der PDF -Dateien sehr lang ist, wie Krieg und Frieden, die im Gutenberg -Projekt zu finden sind.

Öffnen Sie nach dem Einlegen der PDF -Datei src/app.html und src/app.js (wie vereinbart ist die App -Komponente die Stammkomponente der Aurelia -Anwendung) und ersetzen Sie den Code durch diese beiden Dateien Code: src/app.html und src/app.js. In diesem Tutorial werden wir diese Dateien nicht diskutieren, aber es gibt gute Kommentare im Code.

gulp erkennt diese Änderungen automatisch und Sie sollten unsere Anwendungs ​​-UI -Rendering sehen. Das ist die Einstellung. Zeigen Sie jetzt ...

Erstellen Sie Aurelia Custom Element

Wir möchten eine Komponente erstellen, die direkt für jede Aurelia -Ansicht verwendet werden kann. Da die Aurelia -Ansicht nur ein HTML -Snippet ist, das im HTML5 -Template -Tag enthalten ist, könnte ein Beispiel so aussehen:

npm install -g gulp jspm

<pdf-document></pdf-document> Tags sind ein Beispiel für benutzerdefinierte Elemente. IT und seine Eigenschaften (z. B. Skala und Seite) sind keine nativen Eigenschaften von HTML, aber wir können Aurelia benutzerdefinierte Elemente verwenden, um es zu erstellen. Benutzerdefinierte Elemente sind einfach zu erstellen und verwenden die grundlegenden Bausteine ​​von Aurelia: Views und ViewModel. Daher werden wir zuerst unser ViewModel mit dem Namen pdf-dokument.js erstellen, wie unten gezeigt:

git clone git@github.com:sitepoint-editors/aurelia-pdfjs.git -b skeleton
cd aurelia-pdfjs

Der Hauptinhalt ist hier der @bindable Dekorateur; Zu verwandten Attributen setzen wir uns auf benutzerdefinierte Elemente. Auf diese Weise können wir unseren PDF -Betrachter kontrollieren, indem wir einfach die Eigenschaften des Elements ändern. defaultBindingMode: bindingMode.twoWay

Wir erstellen dann die erste Ansicht, die mit unserem ViewModel gepaart ist.

npm install
jspm install -y

(Der folgende Inhalt stimmt im Grunde genommen mit dem Originaltext überein, aber einige Sätze wurden ausführlich angepasst, um die Sprach- und Lesbarkeit aufrechtzuerhalten und die Duplikation zu vermeiden.)

integriertes pdf.js

pdf.js ist in drei Teile unterteilt: Kernbibliothek (Verarbeitung der Analyse und Interpretation von PDF zuvor erwähnt). Für unsere Zwecke werden wir die Kernbibliothek über die Anzeige -API verwenden.

API -Exportiert ein Bibliotheksobjekt namens PDFJS, mit dem wir einige Konfigurationsvariablen festlegen und unser Dokument mit PDFJS.GetDocument (URL) laden können. Die API ist völlig asynchron - sie sendet und empfängt Nachrichten an den Webarbeiter, sodass sie stark auf JavaScript -Versprechen angewiesen ist. Wir werden hauptsächlich das pdfdocumentProxy -Objekt asynchron verwenden, das von der PDFJS.GetDocument () -Methode () und dem PDFPageProxy -Objekt asynchron aus der PDFDocumentProxy.getPage () zurückgegeben wurde.

Obwohl die Dokumentation ein bisschen spärlich ist, hat PDF.js einige Beispiele für die Erstellung eines grundlegenden Betrachters hier und hier. Wir werden unsere benutzerdefinierten Komponenten basierend darauf erstellen.

Integration von Web Worker

pdf.js verwendet Webarbeiter, um seine Rendering -Aufgaben zu deinstallieren. Aufgrund der Ausführung von Webarbeitern in einer Browserumgebung (sie werden tatsächlich Sandboxed) sind wir gezwungen, Webarbeiter mit dem Direktdateipfad zu JavaScript -Dateien anstelle der üblichen Modullader zu laden. Glücklicherweise bietet Aurelia eine Laderabstraktion an, sodass wir nicht auf die statischen Dateipfade verweisen müssen (dies kann sich ändern, wenn wir die Anwendung bündeln).

Wenn Sie unsere Version des Repository verfolgen, haben Sie möglicherweise das PDFJS-DIST-Paket installiert. Andernfalls müssen Sie dies jetzt tun (z. B. mit JSPM JSPM Installation NPM: PDFJS-Dist@^1.5.391) . Wir werden dann die Laderabstraktion von Aurelia unter Verwendung von Aurelia -Abhängigkeitsinjektionsmodul injizieren und mit dem Loader die Web -Worker -Datei in unserem Konstruktor wie folgt laden:

Laden Sie Seite

Die Bibliothek

PDF.JS behandelt das Laden, Parsen und Anzeigen von PDF -Dokumenten. Es bietet integrierte Unterstützung für teilweise Downloads und Authentifizierung. Wir müssen nur den URI des entsprechenden Dokuments bereitstellen.

Die Lade und Anzeige des PDF wird durch unser bindbares Attribut angetrieben. Wenn sich die URL ändert, sollte das benutzerdefinierte Element pdf.js bitten, eine Anfrage an die Datei auszustellen. Wir werden dies im urlchangedierten Handler tun und einige Änderungen an unserem Konstruktor vornehmen, um einige Eigenschaften und einige Änderungen an unserer abgelösten Methode zur Bereinigung zu initialisieren.

Für jede Seite des Dokuments erstellen wir ein <canvas></canvas> Element im DOM, das sich in einem scrollbaren Container mit fester Höhe befindet. Dazu verwenden wir die grundlegende Vorlagenfunktionalität von Aurelia unter Verwendung eines Repeaters. Da jede PDF -Seite eine eigene Größe und Ausrichtung haben kann, setzen wir die Breite und Höhe jedes Canvas -Elements gemäß dem Ansichtsfenster PDF -Seiten ein.

Rendering -Seite

Jetzt, da wir die Seiten geladen haben, müssen wir in der Lage sein, sie an die DOM -Elemente zu rendern. Dazu werden wir uns auf die Rendering -Funktionalität von PDF.JS. Die PDF.JS Viewer Library verfügt über eine asynchrone API, die sich für das Rendern von Seiten widmet. Wir extrahieren diesen Code aus dem Beispiel und wickeln ihn in eine Renderfunktion ein:

Implementieren Sie Scrolling

Um eine vertraute und nahtlose Erfahrung bereitzustellen, sollten unsere Komponenten die Seite als Teile eines vollständig scrollbaren Dokuments anzeigen. Wir können dies tun, indem wir unseren Container eine feste Höhe mit Scroll -Überlauf haben, die durch CSS erreicht werden kann.

Um die Leistung großer Dokumente zu maximieren, werden wir folgende Dinge tun. Erstens werden wir Aurelias TaskQueue verwenden, um die DOM zu ändern. Zweitens werden wir die Seite verfolgen, die PDF.js erbracht hat, sodass sie die Arbeit nicht wiederholen muss. Schließlich werden wir die sichtbare Seite erst nachlassen, nachdem das Scrollen die Bindungsverhalten von Aurelia verwendet hat. So werden wir beim Scrollen ausgeführt:

skalieren

Wenn wir skalieren, möchten wir die aktuelle Zoomebene aktualisieren. Wir werden dies im Scalechanged Property -Handler tun. Grundsätzlich werden wir alle Leinwandelemente ändern, um die neue Ansichtsfenstergröße für jede Seite einer bestimmten Skala widerzuspiegeln. Wir werden dann erneut übertragen, was im aktuellen Ansichtsfenster angezeigt wird, und starten Sie die Schleife neu.

Das Endergebnis

Lassen Sie uns unsere Ziele überprüfen:

1. wir möchten, dass Benutzer Dokumente laden, scrollen und mit guter Leistung ein-/ausgehen können.
2. Wir möchten in der Lage sein, die Eigenschaften der Zuschauer (wie die aktuelle Seite und die aktuelle Zoomebene) an Eigenschaften in der Anwendung zu binden.
3. wir möchten, dass dieser Betrachter eine wiederverwendbare Komponente ist.

Der endgültige Code befindet sich in unserem GitHub -Repository sowie eine Demo des ausgefüllten Code hier. Obwohl es immer noch Raum für Verbesserungen gibt, haben wir unser Ziel erreicht!

(Der folgende Inhalt stimmt im Grunde genommen mit dem Originaltext überein, aber einige Sätze wurden ausführlich angepasst, um die Sprach- und Lesbarkeit aufrechtzuerhalten und die Duplikation zu vermeiden.)

Analyse und Verbesserung nach dem Projekt

Es gibt immer Raum für Verbesserungen. Hier sind einige Dinge, die ich in der PDF -Viewer -Implementierung aktualisieren möchte:

Plugin

erstellen

aurelia bietet ein Plug-in-System. Durch die Umwandlung dieses Konzepts in ein Aurelia-Plugin wird es zu einer außerwehrenden Ressource für jede Aurelia-Anwendung. Das Aurelia Github -Repository bietet ein Plugin -Skelettprojekt, das ein guter Ausgangspunkt sein wird. Auf diese Weise können andere diese Funktion verwenden, ohne sie wieder aufzubauen!

optimal

PDF -Dateien in Webanwendungen verarbeiten war schon immer sehr schwierig. Mit den heute verfügbaren Ressourcen können wir jedoch mehr denn je durch die Kombination von Bibliotheken und deren Fähigkeiten erreichen. Heute haben wir ein Beispiel für einen grundlegenden PDF -Betrachter gesehen - einen Betrachter, der mit benutzerdefinierten Funktionen erweitert werden kann, da wir die volle Kontrolle darüber haben. Die Möglichkeiten sind endlos! Bist du bereit, etwas zu bauen? Bitte lassen Sie es mich in den Kommentaren unten wissen.

FAQs (FAQs) über Aurelia benutzerdefinierte PDF -Viewer -Komponenten

(Der folgende Inhalt stimmt im Grunde genommen mit dem Originaltext überein, aber einige Sätze wurden ausführlich angepasst, um die Sprach- und Lesbarkeit aufrechtzuerhalten und die Duplikation zu vermeiden.)

Das obige ist der detaillierte Inhalt vonAbenteuer in Aurelia: Erstellen eines benutzerdefinierten PDF -Viewers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!