Comment créer une visionneuse PDF JavaScript-tutoriel CSS-php.cn

Le format de document portable, ou PDF pour faire court, est idéal pour partager des documents contenant beaucoup de texte et d'images formatés avec précision, surtout s'ils sont susceptibles d'être imprimés ou de lire hors ligne. Bien que la plupart des navigateurs modernes puissent afficher des fichiers PDF, ils le font à l'aide d'une visionneuse PDF qui s'exécute dans un onglet ou une fenêtre indépendante, forçant les utilisateurs à quitter votre site Web.

PDF.js est une bibliothèque JavaScript en open source qui permet qui permet qui permet qui permet d'autoriser vous pour analyser et rendre les fichiers PDF directement dans vos pages Web. Dans ce tutoriel, je vais vous montrer comment l'utiliser pour créer une visionneuse PDF JavaScript personnalisée à part entière à partir de zéro.

1. Création d'une interface utilisateur

Nous commencerons ce didacticiel JS PDF Viewer en créant une nouvelle page Web et en ajoutant le code de chaudière HTML5 habituel.

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

Copier après la connexion

Suivant, à l'intérieur du <body>, Créez un élément <div> qui peut servir de conteneur pour notre visionneuse PDF dans JS.

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

Copier après la connexion

Au cœur de notre JavaScript La visionneuse PDF sera un élément HTML5 <canvas>. Nous rendrons les pages de nos fichiers PDF à l'intérieur. Ajoutez donc le code suivant à l'intérieur de l'élément <div>.

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

Copier après la connexion

Pour garder les choses simples, nous ne rendrons qu'une page à l'intérieur de la toile à tout moment. Nous permettons cependant aux utilisateurs de passer à la page précédente ou à la page suivante en appuyant sur un bouton. De plus, pour afficher le numéro de page actuel et pour permettre aux utilisateurs de passer à n'importe quelle page qu'ils souhaitent, notre interface aura un champ de saisie.

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

Copier après la connexion

Pour prendre en charge les opérations de zoom, ajoutez deux boutons supplémentaires à l'interface : un pour zoomer et un pour zoomer.

<div id="zoom_controls">  <br>    <button id="zoom_in">+</button><br>    <button id="zoom_out">-</button><br></div><br>

Copier après la connexion

À la fin de cette section, le code de la page Web ressemble à ceci.

<!doctype html> <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>     <div id="my_pdf_viewer"><br>        <div id="canvas_container"><br>            <canvas id="pdf_renderer"></canvas><br>        </div><br><br>        <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><br>        <div id="zoom_controls">  <br>            <button id="zoom_in">+</button><br>            <button id="zoom_out">-</button><br>        </div><br>    </div><br></body><br></html><br>

Copier après la connexion

2. Obtenir pdf.js

Maintenant qu'une interface utilisateur nue pour notre visionneuse PDF JavaScript est prête, ajoutons PDF.js à notre page Web. Étant donné que la dernière version de la bibliothèque est disponible sur CDNJS, nous pouvons le faire en ajoutant simplement les lignes suivantes vers la fin de la page Web.

<script<br>    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"><br></script><br>

Copier après la connexion

Si vous préférez utiliser une copie locale de la bibliothèque , vous pouvez le télécharger à partir du référentiel PDFJS-Dist.

3. Chargement d'un fichier PDF

Avant de commencer à charger un fichier PDF, créons un objet JavaScript simple pour stocker l'état de notre visionneuse PDF dans JS. À l'intérieur, nous aurons trois éléments: une référence au fichier PDF lui-même, l'index de page actuel et le niveau de zoom actuel.

<script><br>    var myState = {<br>        pdf: null,<br>        currentPage: 1,<br>        zoom: 1<br>    }<br> <br>    // more code here<br></script><br>

Copier après la connexion

À ce stade, nous pouvons charger notre fichier PDF en appelant La méthode getDocument() de l'objet pdfjsLib, qui s'exécute de manière asynchrone.

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

Copier après la connexion

Notez que la méthode getDocument() utilise en interne un objet XMLHttpRequest pour charger le fichier PDF. Cela signifie que le fichier doit être présent soit sur votre propre serveur Web, soit sur un serveur qui autorise les demandes d'origine transversale.

Si vous n'avez pas de fichier PDF à portée de main, vous pouvez obtenir celui que j'utilise depuis Wikipedia .

Nommé pdf afin que notre visionneuse PDF dans JS rend automatiquement la première page du fichier PDF. Nous définirons la fonction à l'étape suivante.

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

Copier après la connexion

4. Rendant une page render()

En appelant la méthode

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

Copier après la connexion

de l'objet

et en y passant un numéro de page, nous pouvons obtenir une référence à n'importe quelle page du fichier PDF. Pour l'instant, passons la propriété

de notre objet d'état. Cette méthode renvoie également une promesse, nous aurons donc besoin d'une fonction de rappel pour gérer son résultat.

getPage() En conséquence, créez une nouvelle fonction appelée pdf contenant le code suivant: currentPage

Pour rendre réellement une page, nous devons appeler la méthode render() de l'objet

disponible dans le rappel. En tant qu'arguments, la méthode attend le contexte 2D de notre toile et un objet

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

Copier après la connexion

, que nous pouvons obtenir en appelant la méthode

. Parce que la méthode render() s'attend à ce que le niveau de zoom souhaité comme argument, nous devons passer la propriété page de notre objet d'état. PageViewport getViewport() getViewport() Les dimensions de la fenêtre dépendent de la taille d'origine de la page et le niveau de zoom. Afin de nous assurer que toute la fenêtre est rendue sur notre toile, nous devons maintenant modifier la taille de notre canevas pour correspondre à celle de la fenêtre. Voici comment: zoom

<div id="zoom_controls">  <br>    <button id="zoom_in">+</button><br>    <button id="zoom_out">-</button><br></div><br>

Copier après la connexion

À ce stade, nous pouvons aller de l'avant et rendre la page.

<!doctype html> <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>     <div id="my_pdf_viewer"><br>        <div id="canvas_container"><br>            <canvas id="pdf_renderer"></canvas><br>        </div><br><br>        <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><br>        <div id="zoom_controls">  <br>            <button id="zoom_in">+</button><br>            <button id="zoom_out">-</button><br>        </div><br>    </div><br></body><br></html><br>

Copier après la connexion

En mettant le tout, tout le code source ressemble à ceci.

<script<br>    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"><br></script><br>

Copier après la connexion

Si vous essayez d'ouvrir la page Web dans un navigateur, vous devriez maintenant pouvoir voir la première page de votre fichier PDF.

<script><br>    var myState = {<br>        pdf: null,<br>        currentPage: 1,<br>        zoom: 1<br>    }<br> <br>    // more code here<br></script><br>

Copier après la connexion

Vous avez peut-être remarqué que la taille de la taille de Notre visionneuse PDF dépend actuellement de la taille de la page rendue et du niveau de zoom. Ce n'est pas idéal car nous ne voulons pas que la disposition de notre page Web soit affectée pendant que les utilisateurs interagissent avec la visionneuse PDF en JavaScript.

Pour résoudre ce problème, tout ce que nous devons faire est de donner une largeur et une hauteur fixes à l'élément Comment créer une visionneuse PDF JavaScript

Comment créer une visionneuse PDF JavaScript

encapsulant notre toile et définissez sa propriété

CSS à

. Cette propriété, si nécessaire, ajoute des barres de défilement à l'élément

, permettant aux utilisateurs de faire défiler horizontalement et verticalement. <div>

Ajoutez le code suivant à l'intérieur de la balise <head> de la page Web:

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

Copier après la connexion

Vous êtes, bien sûr, libre de modifier la largeur et la hauteur ou même d'utiliser les requêtes multimédias pour faire le <div> L'élément correspond à vos exigences.

éventuellement, vous pouvez inclure les règles CSS suivantes pour que l'élément <div> semble plus distinct:

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

Copier après la connexion

si vous actualisez la page Web maintenant, Vous devriez voir quelque chose comme ça sur votre écran:

5. La modification de la page actuelle

Notre visionneuse PDF JavaScript est actuellement capable d'afficher uniquement la première page de tout fichier PDF qui lui est donné. Pour permettre aux utilisateurs de modifier la page en cours de rendu, nous devons maintenant ajouter des écouteurs d'événements de clic aux boutons go_previous et go_next que nous avons créés plus tôt. Diminuez la propriété

de notre objet d'état, en vous assurant qu'il ne tombe pas en dessous de

. Après cela, nous pouvons simplement appeler à nouveau la fonction go_previous pour rendre la nouvelle page. currentPage 1 De plus, nous devons mettre à jour la valeur du champ de texte render() afin qu'il affiche le nouveau numéro de page. Le code suivant vous montre comment:

current_page De même, à l'intérieur de l'écoute d'événements du bouton

, nous devons incrémenter la propriété

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

Copier après la connexion

, tout en garantissant qu'il ne dépasse pas le nombre de pages Présent dans le fichier PDF, que nous pouvons déterminer en utilisant la propriété

de l'objet go_next. currentPage numPages _pdfInfo Enfin, nous devons ajouter un écouteur d'événement de presse de clé à la

Field de texte de texte afin que les utilisateurs puissent passer directement à n'importe quelle page qu'ils souhaitent en tapant simplement un numéro de page et en appuyant sur la clé

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

Copier après la connexion

Entrez

. À l'intérieur de l'écouteur d'événements, nous devons nous assurer que le numéro que l'utilisateur a saisi est à la fois supérieur à zéro et inférieur ou égal à la propriété current_page. numPages Notre visionneuse PDF dans JavaScript peut maintenant Affichez n'importe quelle page du fichier PDF.

<div id="zoom_controls">  <br>    <button id="zoom_in">+</button><br>    <button id="zoom_out">-</button><br></div><br>

Copier après la connexion

6. La modification du niveau de zoom

parce que notre fonction

utilise déjà la propriété

de l'objet d'état tout en rendant une page, l'ajustement du niveau de zoom est aussi simple que l'incrémentation ou la décrémentation de la propriété et l'appel de la fonction.

render() à l'intérieur de l'écouteur d'événements en clic du bouton zoom, incrémentons la propriété

par

. zoom_in zoom 0.5 et à l'intérieur L'auditeur d'événements en clic du bouton

, décrémentons la propriété

<!doctype html> <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>     <div id="my_pdf_viewer"><br>        <div id="canvas_container"><br>            <canvas id="pdf_renderer"></canvas><br>        </div><br><br>        <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><br>        <div id="zoom_controls">  <br>            <button id="zoom_in">+</button><br>            <button id="zoom_out">-</button><br>        </div><br>    </div><br></body><br></html><br>

Copier après la connexion

par

. zoom_out

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

Copier après la connexion

Vous êtes libre d'ajouter des limites supérieures et inférieures à la propriété zoom, mais elles ne sont pas nécessaires.

C'est à quoi il ressemble quand tout est assemblé.

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

Copier après la connexion

Notre visionneuse PDF dans JavaScript est prête. Si vous actualisez à nouveau la page Web, vous devriez pouvoir afficher toutes les pages présentes dans le document PDF en JavaScript et également zoomer ou zoomer.

Félicitations! Vous avez appris à créer une visionneuse pour les documents PDF dans JavaScript!

Vous savez maintenant comment utiliser PDF.js pour créer une visionneuse PDF JavaScript personnalisée pour votre site Web. Avec votre nouveau spectateur pour les documents PDF en JavaScript, vous pouvez offrir en toute confiance une expérience utilisateur sans couture tout en affichant les brochures, les livres blancs, les formulaires et autres documents de votre organisation destinés à être distribués sous forme de copies papier.

Vous pouvez apprendre En savoir plus sur Pdf.js sur le Repo officiel Github.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!