So erstellen Sie einen JavaScript -PDF -Viewer-CSS-Tutorial-php.cn

Das tragbare Dokumentformat oder kurz PDF ist ideal, um Dokumente zu teilen, die viele genau formatierte Text und Bilder enthalten, insbesondere wenn sie wahrscheinlich gedruckt oder offline gelesen werden. Obwohl die meisten modernen Browser PDF-Dateien anzeigen können, verwenden sie dies mit einem PDF-Viewer, der in einer unabhängigen Registerkarte oder einem unabhängigen Fenster ausgeführt wird, und zwingt die Benutzer, Ihre Website zu verlassen. Sie können PDF -Dateien direkt in Ihre Webseiten analysieren und rendern. In diesem Tutorial zeige ich Ihnen, wie Sie es verwenden, um einen vollwertigen benutzerdefinierten JavaScript -PDF -Viewer von Grund auf neu zu erstellen.

1. Erstellen einer Benutzeroberfläche

Wir werden dieses Tutorial von JS PDF Viewer starten, indem wir eine neue Webseite erstellen und den üblichen HTML5 -Boilerplate -Code hinzuzufügen. > Erstellen Sie ein

Element, das als Container für unseren PDF -Betrachter in js. PDF Viewer ist ein HTML5 -Element. Wir werden die Seiten unserer PDF -Dateien darin wiedergeben. Fügen Sie also den folgenden Code in das Element

hinzu. Wir erlauben den Benutzern jedoch, auf die vorherige Seite oder auf der nächsten Seite umzusteigen, indem wir eine Taste drücken. Um die aktuelle Seitennummer anzuzeigen und Benutzer zu einer beliebigen Seite zu springen, verfügt unsere Schnittstelle über ein Eingabefeld. : Eine zum Zoomen und eine zum Vergrößern.

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

Nach dem Login kopieren

Am Ende dieses Abschnitts sieht der Webseitencode so aus. Erhalten Sie PDF.js <body> <div> Jetzt, da eine Back-Bones-Benutzeroberfläche für unseren JavaScript-PDF-Viewer bereit ist, fügen wir unserer Webseite PDF.js hinzu. Da die neueste Version der Bibliothek auf CDNJS verfügbar ist, können wir dies tun, indem wir einfach die folgenden Zeilen gegen Ende der Webseite hinzufügen. Sie können es aus dem PDFJS-DIST-Repository herunterladen.

<div id="my_pdf_viewer"><br>     <br></div><br>

Nach dem Login kopieren

3. Laden Sie eine PDF -Datei

<canvas> Bevor wir mit dem Laden einer PDF -Datei beginnen, erstellen Sie ein einfaches JavaScript -Objekt, um den Status unseres PDF -Viewers in JS zu speichern. Im Inneren haben wir drei Elemente: eine Referenz auf die PDF -Datei selbst, den aktuellen Seitenindex und die aktuelle Zoomebene. Die <div> -Methode des

-Objekts, das asynchron ausgeführt wird.

<div id="canvas_container"><br>    <canvas id="pdf_renderer"></canvas><br></div><br>

Nach dem Login kopieren

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

Nach dem Login kopieren

Beachten Sie, dass die getDocument() -Methode intern ein XMLHttpRequest Objekt zum Laden der PDF -Datei verwendet. Dies bedeutet, dass die Datei entweder auf Ihrem eigenen Webserver oder auf einem Server vorhanden sein muss . Namen

, so dass unser PDF -Viewer in JS automatisch die erste Seite der PDF -Datei rendert. Wir definieren die Funktion im nächsten Schritt.

pdf 4. Rendern einer Seite

<div id="my_pdf_viewer"><br>     <br></div><br>

Nach dem Login kopieren

Durch Aufrufen der

-Methode des render() -Objekts und über eine Seitennummer an sie können wir auf eine Seite in der PDF -Datei verweisen. Lassen Sie uns vorerst die

Eigenschaft unseres staatlichen Objekts an sie übergeben. Auch diese Methode gibt ein Versprechen zurück, daher benötigen wir eine Rückruffunktion, um ihr Ergebnis zu verarbeiten. Um eine Seite tatsächlich zu rendern, müssen wir die in der Rückruf verfügbare

<div id="canvas_container"><br>    <canvas id="pdf_renderer"></canvas><br></div><br>

Nach dem Login kopieren

-Methode des

-Objekts aufrufen. Als Argumente erwartet die Methode den 2D -Kontext unserer Leinwand und eines

-Objekts, das wir erhalten können, indem wir die

-Methode aufrufen. Da die getPage() -Methode die gewünschte Zoomebene als Argument erwartet, müssen wir die pdf -Sache unseres Zustandsobjekts an sie übergeben. Die Seite und die Zoomebene. Um sicherzustellen, dass das gesamte Ansichtsfenster auf unserer Leinwand gerendert wird, müssen wir jetzt die Größe unserer Leinwand so ändern, dass sie dem des Ansichtsfensters entspricht. Hier ist: currentPage

Zu diesem Zeitpunkt können wir die Seite weitermachen. render()

Wenn Sie versuchen, die Webseite in einem Browser zu öffnen, sollten Sie jetzt die erste Seite Ihrer PDF -Datei sehen können. Unser PDF -Viewer hängt derzeit von der Größe der Seite der Seite und der Zoomebene ab. Dies ist nicht ideal, da wir nicht möchten, dass das Layout unserer Webseite betroffen ist, während Benutzer mit dem PDF -Viewer in JavaScript interagieren.

<div id="navigation_controls"><br>    <button id="go_previous">Previous</button><br>    <input id="current_page" value="1" type="number"/><br>    <button id="go_next">Next</button><br></div><br>

Nach dem Login kopieren

Um dies zu beheben, müssen wir nur eine feste Breite und Höhe für das render() -Element geben, die unsere Leinwand einkapseln und seine CSS -Eigenschaft auf page einstellen. Bei Bedarf fügt diese Eigenschaft dem PageViewport -Element bei Bedarf Scrollbalken hinzu, sodass Benutzer sowohl horizontal als auch vertikal scrollen können. getViewport()

Fügen Sie den folgenden Code im <head> -Tag der Webseite hinzu:

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

Nach dem Login kopieren

Sie können natürlich die Breite und Höhe ändern oder sogar Medienfragen verwenden, um die Element entspricht Ihren Anforderungen. Sie sollten so etwas auf Ihrem Bildschirm sehen: <div>

5. Ändern der aktuellen Seite. Um den Benutzern die zu verwendende Seite zu ändern, müssen wir jetzt die Tasten <div> und

, die wir früher erstellt haben, auf Ereignishörer hinzufügen. Dekrementieren Sie die

<div id="my_pdf_viewer"><br>     <br></div><br>

Nach dem Login kopieren

-Mobilie unseres Zustandsobjekts und stellen Sie sicher, dass es nicht unter

fällt. Nachdem wir dies getan haben, können wir die Funktion

einfach erneut aufrufen, um die neue Seite zu rendern. Der folgende Code zeigt Ihnen, wie: So erstellen Sie einen JavaScript -PDF -Viewer

in ähnlicher Weise im Ereignishörer der Taste

die go_previous -Meigenschaft inkrementieren und gleichzeitig sicherstellen, dass die Anzahl der Seiten nicht überschreitet In der PDF -Datei vorhanden, die wir mit der Eigenschaft go_next des

-Objekts ermitteln können. Damit Benutzer direkt zu jeder Seite springen können, die sie wünschen, indem sie einfach eine Seitenzahl eingeben und die Taste

eingeben. In dem Ereignishörer müssen wir sicherstellen, dass die Nummer, die der Benutzer eingegeben hat Zeigen Sie eine Seite der PDF -Datei an. go_previous currentPage 1 6. Ändern der Zoomebene render()

Da in unserer

-Funktion die Eigenschaft current_page des Statusobjekts beim Rendern einer Seite bereits verwendet wird, ist das Anpassen der Zoomebene so einfach wie das Inkrementieren oder Verringern der Eigenschaft und das Aufrufen der Funktion.

<div id="canvas_container"><br>    <canvas id="pdf_renderer"></canvas><br></div><br>

Nach dem Login kopieren

Innerhalb des On-Click-Ereignis-Listeners der Taste

Inkrementieren wir die go_next Eigenschaft mit currentPage numPages _pdfInfo

und innerhalb der On-Click-Event-Hörer der Taste

<div id="navigation_controls"><br>    <button id="go_previous">Previous</button><br>    <input id="current_page" value="1" type="number"/><br>    <button id="go_next">Next</button><br></div><br>

Nach dem Login kopieren

, lassen Sie uns die

Eigenschaft mit current_page.

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

Nach dem Login kopieren

Sie können der Eigenschaft zoom obere und untere Grenzen hinzufügen, aber sie sind nicht erforderlich. 🎜>

Unser PDF -Viewer in JavaScript ist bereit. Wenn Sie die Webseite erneut aktualisieren, sollten Sie in der Lage sein, alle im PDF -Dokument in JavaScript vorhandenen Seiten anzusehen und auch in sie zu zoomen. Sie haben gelernt, einen Betrachter für PDF -Dokumente in JavaScript zu erstellen! Mit Ihrem neuen Betrachter für PDF -Dokumente in JavaScript können Sie zuversichtlich ein nahtloses Benutzererlebnis anbieten, während Sie die Broschüren, die weißen Papiere und andere Dokumente Ihrer Organisation zeigen, die im Allgemeinen als harte Kopien verteilt werden sollen.

Sie können lernen Mehr über pdf.js auf dem offiziellen Github Repo.

<div id="my_pdf_viewer"><br>     <br></div><br>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen JavaScript -PDF -Viewer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!