Tutorial zur Verwendung von pdfjs

Der Charme des pdf.js-Frameworks besteht darin, dass es ohne lokale Unterstützung für HTML5 implementiert ist und außerdem besser mit Browsern kompatibel ist. Es gibt nur eine Voraussetzung: Der Browser unterstützt HTML5! (Aber für niedrigere Versionen des IE kann ich nur mein Beileid aussprechen!)

Es wird gesagt, dass IE9 und höher in Ordnung sind, da mein lokaler IE11 ist, also habe ich ihn nur auf IE11 getestet und er hat bestanden ( natürlich Firefox, 360, ich habe es auch getestet und es ist in Ordnung).

Aufgrund der Projektentwicklungsanforderungen sollte PDF online angezeigt und mit dem IE kompatibel sein, daher habe ich mich für pdf.js entschieden, aber es gibt nur sehr wenige Online-Tutorials dazu. Ich habe einen Tag gebraucht, um es fertigzustellen. Im Nachhinein war es gar nicht so schwierig, wie ich dachte, also habe ich beschlossen, einen Blog als Referenz für alle zu schreiben!

Das Folgende ist die URL zu pdf.js:

GitHub: https://Github.com/mozilla/pdf .js /

Die obige URL enthält eine grundlegende Einführung in pdf.js, wie Sie den Quellcode erhalten und wie Sie ihn später erstellen!

Aber er verwendet:

$ Git clone Git://Github.com/mozilla /pdf. js.Git

Build mit:

$ node make generic

Ich weiß nicht, wie man Git, Knoten (wenn Sie etwas darüber wissen, sagen Sie es mir bitte, danke!), also bin ich zum Erstellen auf Linux umgestiegen (in dieser Zeit gab es viele traurige Erfahrungen, ich habe das Gefühl, dass daraus ein Film gemacht werden könnte !!! Als ich zum Beispiel Git zum Abrufen des Quellcodes verwendete, meldete das System, dass Git nicht installiert sei. Als ich Node verwendete, wurde mir angezeigt, dass ShellJs Er sagte mir, ich solle npm verwenden, um ShellJS zu installieren. Tatsächlich verwenden wir pdf.js, und letztendlich benötigen wir nur den erstellten Inhalt Laden Sie es hier herunter:

----------- --------------- -----Trennlinie----------------- ---------

Die kostenlose Download-Adresse ist unter http://linux.linuxidc.com/

Der Benutzername und das Passwort sind www.linuxidc.com

Das spezifische Download-Verzeichnis ist /2015 information/ 12. Juni/pdf.js

Nutzungsanleitung/

Informationen zum Herunterladen finden Sie unter http://www.linuxidc.com/Linux/2013-07/87684.htm

--------------------- ---------------------Trennlinie---- ---------------------- ---------------

Die Verzeichnisstruktur nach dem Build ist :

Mit dem Build-Inhalt nach dem Build können wir einen einfachen Test durchführen und das Generikum in Tomcats Webapps kopieren

Nach dem Start von Tomcat können Sie Folgendes übergeben:

http://localhost:8080/generic/web/viewer.html

Besuchen Sie uns! Sie können eine sehr schöne Benutzeroberfläche sehen:

generic/web/viewer.html gibt hauptsächlich den Stil des PDF-Readers wieder, während generic/web/viewer.js die geöffnete PDF-Datei angibt (von Natürlich gibt es noch andere Funktionen, aber diese sind nicht unser Anliegen. Schauen wir uns einen Code an, der sich in generic/web/viewer.js befindet:

Wir können sehen, dass es standardmäßig geöffnet ist generic/web/compressed.tracemonkey-pldi-09.pdf Datei, sehen Sie sich den folgenden Code an:

Dies sagt uns, dass wir das geöffnete PDF dynamisch angeben können, indem wir den Dateiparameter document übergeben! Zum Beispiel:

http://localhost:8080/generic/web/viewer.html?file=qbs.pdf

Im Folgenden werde ich vorstellen, wie man es im spezifischen eingebetteten Projekt verwendet!

Sie können den Inhalt generisch als Plug-in eines Drittanbieters verwenden und wie folgt im Projekt speichern:

Dann kann die Seite das ?file=" width="100%" height="800">

Rendering wie folgt:

Das Wesentliche ist, dass wir direkt Greifen Sie auf generic/web/viewer .html zu und geben Sie dann einen Dateiparameter an, um die zu öffnende PDF-Datei anzugeben! Die oben verwendete Stream-Methode ist angegeben.

Das Obige ist nur eine einfache Möglichkeit, es zu verwenden:

Ich weiß nicht, ob Sie die folgende URL-Anfrage ausprobiert haben:

http://localhost:8080/akane/resources/plugin/pdfJs/generic/web/viewer.html?file=/akane/displayPDF.do?id=966c6f0e-3c06-4154-aafd-afdbee5bcb65

In tatsächlichen Anwendungen können wir uns dafür entscheiden, unterschiedliche PDF-Dateien basierend auf unterschiedlichen Parametern anzuzeigen. Zu diesem Zeitpunkt besteht das Problem der Parameterübergabe. Wenn Sie die obige URL-Adresse sorgfältig beachten, werden Sie dies im Dateianforderungsparameter finden Der Wert ist eine URL-Adresse, und an diese URL-Adresse sind eigene Anforderungsparameter angehängt, was dazu führt, dass 2 „?“

in einer URL-Adresse erscheinen, was dazu führt, dass der Browser diese URL nicht normal analysieren kann!

Eine Lösung ist: Wir können zuerst den Wert des Dateiparameters kodieren und ihn dann dekodieren, um dieses Problem zu lösen!

An dieser Stelle können Sie die Funktion encodeURIComponent() aufrufen! Da es sich um eine js-Funktion handelt, müssen Sie den src-Wert für den iframe in der Document-Ready-Funktion dynamisch festlegen, wie unten gezeigt:

< ;script type ="text/javascript">
$(function(){
$("#displayPdfIframe").attr("src",'?file=' + encodeURIComponent(''));
} );

                             "100%" height="100%">
< ;/div>

Da es eine Kodierung gibt, muss es eine Dekodierung geben. Analysieren Sie es, aber diese Arbeit wurde von generic/web/viewer.js bereits für uns erledigt, wie unten gezeigt :

An diesem Punkt endet die Einführung des pdf.js-Plugins. Das erste

Blog schreiben, falls vorhanden Stimmt etwas nicht, ich hoffe, Sie können mir einen Rat geben, danke Ich möchte den beiden Autoren von pdf.js danken, ich bewundere diese ausländischen Meister, zwei Leute können so ein gutes Framework schreiben, und es ist auch Open Source!).

Dieser Artikel wird ständig mit der Linkadresse

aktualisiert: http://www.linuxidc.com/Linux/2015-06/118728.htm Das Obige hat das Tutorial zur Verwendung von pdfjs vorgestellt, einschließlich verschiedener Aspekte. Ich hoffe, es wird für Freunde hilfreich sein, die sich für PHP-Tutorials interessieren.