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> 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!