Cet article a été évalué par des pairs par Vildan Softic. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur!

Le traitement des fichiers PDF dans les applications Web a toujours été très délicat. Si vous avez de la chance, vos utilisateurs ont juste besoin de télécharger le fichier. Mais parfois, les utilisateurs ont besoin de plus de fonctionnalités. J'ai eu de la chance dans le passé, mais cette fois, nos utilisateurs ont besoin de l'application pour afficher des documents PDF afin qu'ils puissent enregistrer des métadonnées liées à chaque page. Auparavant, les gens pourraient avoir utilisé des plugins PDF co?teux (tels que Adobe Reader) pour s'exécuter dans le navigateur pour y parvenir. Cependant, après un certain temps et une expérimentation, j'ai trouvé un meilleur moyen d'intégrer une visionneuse PDF dans mon application Web. Aujourd'hui, nous apprendrons à simplifier le traitement PDF à l'aide d'Aurelia et PDF.JS.

Points de base

• Utilisez Aurelia et PDF.js pour créer une visionneuse PDF personnalisée et efficace avec des fonctionnalités telles que la mise à l'échelle et le défilement pour améliorer l'interaction et les performances de l'utilisateur.
• Implémentez la liaison des données bidirectionnelle pour les attributs tels que la page actuelle et le niveau de zoom dans Aurelia, permettant une intégration transparente et des mises à jour dynamiques dans l'application.
• Développer la visionneuse PDF en éléments personnalisés réutilisables Aurelia qui vous permettent d'ajouter plusieurs téléspectateurs à votre application sans conflit.
• Utilisez PDF.js pour traiter le rendu PDF, prendre en charge les opérations asynchrones et le travailleur Web pour désinstaller le traitement et améliorer la vitesse de réponse de l'interface utilisateur.
• résoudre les problèmes de performances potentiels en considérant le défilement virtuel et d'autres optimisations, en particulier pour gérer efficacement les grands documents.
• Explorez la possibilité de convertir une visionneuse PDF personnalisée en un plugin Aurelia pour faciliter l'intégration dans d'autres projets et applications.

Présentation: objectif

Notre objectif aujourd'hui est de construire un composant de la visionneuse PDF dans Aurelia qui permet un flux de données bidirectionnel entre le spectateur et notre application. Nous avons trois exigences principales:

1. Nous voulons que les utilisateurs puissent charger des documents, faire défiler et zoomer / sortir avec de bonnes performances.
2. Nous voulons pouvoir lier bidirectionnellement les propriétés de la visionneuse (telles que la page actuelle et le niveau de zoom actuel) aux propriétés de l'application.
3. Nous voulons que ce spectateur soit un composant réutilisable; nous voulons pouvoir facilement placer plusieurs téléspectateurs dans la demande sans conflit.

Vous pouvez trouver le code de ce tutoriel dans notre référentiel GitHub, ainsi qu'une démo du code terminé ici.

Introduction pdf.js

pdf.js est une bibliothèque JavaScript écrite par la Fondation Mozilla. Il charge des documents PDF, des fichiers d'analyse et des métadonnées connexes, et rend la sortie de la page vers l'élément Dom n?ud (généralement <canvas></canvas>). La visionneuse par défaut incluse dans le projet prend en charge les téléspectateurs PDF intégrés dans Chrome et Firefox et peut être utilisé comme pages ou ressources autonomes (intégrées dans IFRAMES).

C'est vraiment cool. Le problème ici est que la visionneuse par défaut, bien qu'elle possède de nombreuses fonctionnalités, est con?ue comme une page Web autonome. Cela signifie que même s'il peut être intégré dans une application Web, il doit essentiellement s'exécuter dans un sable IFRAME. La visionneuse par défaut est con?ue pour obtenir une entrée de configuration via sa cha?ne de requête, mais nous ne pouvons pas facilement modifier la configuration après le chargement initial, et nous ne pouvons pas facilement obtenir des informations et des événements de la visionneuse. Afin de l'intégrer à l'application Web Aurelia - y compris la gestion des événements et la liaison bidirectionnelle - nous devons créer un composant personnalisé Aurelia.

Remarque: Si vous avez besoin d'une revue sur PDF.js, veuillez consulter notre tutoriel: rendu PDF personnalisé en JavaScript à l'aide de PDF.js

de Mozilla.

implémentation

Pour atteindre notre objectif, nous créerons un élément personnalisé Aurelia. Cependant, nous ne placerons pas la visionneuse par défaut dans nos composants. Au lieu de cela, nous créerons notre propre visionneuse qui se connecte à la bibliothèque PDF.js Core and Viewer afin que nous puissions maximiser le contr?le de nos propriétés et rendements liés. Pour notre preuve de concept initial, nous commencerons par l'application Aurelia Skeleton.

Code Photoscope

Comme vous pouvez le voir sur le lien ci-dessus, l'application Skeleton a de nombreux fichiers, dont beaucoup dont nous n'avons pas besoin. Pour simplifier les opérations, nous avons préparé une version rationalisée du squelette et y a ajouté du contenu:

• Une tache Gulp pour copier nos fichiers PDF dans le dossier DIST (Aurelia est utilisée pour le regroupement).
• La dépendance pdf.js a été ajoutée à package.json.
• Dans le répertoire racine de l'application, index.html et index.css ont subi certains paramètres de style initiaux.
• La copie vide du fichier que nous allons utiliser a été ajoutée.
• Le fichier SRC / Resources / Elements / PDF-Document.css contient certains styles CSS pour les éléments personnalisés.

Alors, faisons fonctionner l'application en cours d'exécution.

Tout d'abord, assurez-vous que Gulp et JSPM sont installés à l'échelle mondiale:

npm install -g gulp jspm

puis clonez le squelette et entrez-y:

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

puis installez les dépendances nécessaires:

npm install
jspm install -y

Exécutez enfin Gulp Watch et accédez à http: // localhost: 9000. Si tout se passe comme prévu, vous devriez voir un message de bienvenue.

Plus de paramètres

La prochaine chose à faire est de trouver quelques fichiers PDF et de les mettre dans SRC / Documents. Nommez-les un.pdf et deux.pdf. Pour maximiser les tests de nos composants personnalisés, il est préférable que l'un des fichiers PDF soit très long, comme la guerre et la paix qui peuvent être trouvés dans le projet Gutenberg.

Après avoir mis le fichier PDF en place, ouvrez Src / App.html et Src / App.js (comme convenu, le composant de l'application est le composant racine de l'application Aurelia) et remplacez le code par ces deux fichiers Code: src / app.html et src / app.js. Dans ce tutoriel, nous ne discuterons pas de ces fichiers, mais il y a de bons commentaires dans le code.

Gulp détectera automatiquement ces modifications et vous devriez voir notre rendu d'interface utilisateur d'application. C'est le paramètre. Maintenant, commencez à montrer ...

Créer un élément personnalisé Aurelia

Nous voulons créer un composant qui peut être utilisé directement pour n'importe quelle vue Aurelia. étant donné que la vue Aurelia n'est qu'un extrait HTML inclus dans la balise de modèle HTML5, un exemple peut ressembler à ceci:

npm install -g gulp jspm

Les balises

<pdf-document> sont un exemple d'éléments personnalisés. Il et ses propriétés (telles que l'échelle et la page) ne sont pas des propriétés natives de HTML, mais nous pouvons utiliser des éléments personnalisés Aurelia pour le créer. Les éléments personnalisés sont faciles à créer, en utilisant les blocs de construction de base d'Aurelia: vues et vue ViewModel. Par conséquent, nous allons d'abord construire notre ViewModel, nommé PDF-Document.js, comme indiqué ci-dessous:

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

Le contenu principal à noter ici est le @bindable décorateur; Aux attributs connexes, nous placons sur des éléments personnalisés. Cela nous permettra de contr?ler notre visionneuse PDF simplement en modifiant les propriétés de l'élément. defaultBindingMode: bindingMode.twoWay

Nous créerons ensuite la vue initiale associée à notre ViewModel.

npm install
jspm install -y

(Le contenu suivant est essentiellement cohérent avec le texte d'origine, mais certaines phrases ont été ajustées en détail pour maintenir la ma?trise et la lisibilité et éviter la duplication.)

pdf.js intégrés

pdf.js est divisé en trois parties: bibliothèque principale (traitement de l'analyse et de l'interprétation des documents PDF), de la bibliothèque d'affichage (construire des API disponibles en haut de la couche de base) et du plug-in de la visionneuse Web (pré-construit nous mentionné précédemment). Pour nos besoins, nous utiliserons la bibliothèque de base via l'API d'affichage;

Afficher l'API Exporte un objet de bibliothèque nommé PDFJS, qui nous permet de définir certaines variables de configuration et de charger notre document à l'aide de PDFJS.GetDocument (URL). L'API est complètement asynchrone - elle envoie et re?oit des messages au travailleur Web, il s'appuie donc fortement sur JavaScript Promise. Nous utiliserons principalement l'objet PDFDocumentProxy renvoyé de manière asynchrone de la méthode pdfjs.getDocument () et l'objet PDFPageProxy renvoyé de manière asynchrone à partir de pdfDocumentProxy.getPage ().

Bien que la documentation soit un peu clairsemée, PDF.js a quelques exemples de création d'une visionneuse de base, ici et ici. Nous allons construire nos composants personnalisés en fonction de cela.

Intégration des travailleurs Web

pdf.js utilise un travailleur Web pour désinstaller ses taches de rendu. En raison de la fa?on dont les travailleurs du Web s'exécutent dans un environnement de navigateur (ils sont en fait en bac à sable), nous sommes obligés de charger des travailleurs Web en utilisant le chemin de fichier direct vers les fichiers JavaScript au lieu des chargeurs de modules habituels. Heureusement, Aurelia fournit une abstraction de chargeur, nous n'avons donc pas à faire référence à des chemins de fichier statiques (cela peut changer lorsque nous regroupons l'application).

Si vous suivez notre version du référentiel, vous avez peut-être installé le package PDFJS-DIST, sinon vous devrez le faire maintenant (par exemple, en utilisant JSPM JSPM Install NPM: PDFJS-DIST@^1.5.391) . Nous injecterons ensuite l'abstraction du chargeur d'Aurelia à l'aide du module d'injection de dépendance d'Aurelia et utiliserons le chargeur pour charger le fichier de travailleur Web dans notre constructeur comme suit:

Page de chargement

La bibliothèque PDF.js gère le chargement, l'analyse et l'affichage des documents PDF. Il a une prise en charge intégrée pour les téléchargements partiels et l'authentification. Tout ce que nous avons à faire est de fournir l'URI du document pertinent.

Le chargement et l'affichage du PDF seront pilotés par notre attribut lié; dans ce cas, ce sera l'attribut URL. Fondamentalement, lorsque l'URL change, l'élément personnalisé doit demander à PDF.js d'émettre une demande au fichier. Nous le ferons dans le gestionnaire URLChanged et apporterons quelques modifications à notre constructeur pour initialiser certaines propriétés et quelques modifications apportées à notre méthode détachée pour nettoyer.

Pour chaque page du document, nous créerons un élément <canvas></canvas> dans le DOM situé dans un conteneur défilement avec une hauteur fixe. Pour ce faire, nous utiliserons la fonctionnalité de modèle de base d'Aurelia, en utilisant un répéteur. étant donné que chaque page PDF peut avoir sa propre taille et son orientation, nous définirons la largeur et la hauteur de chaque élément de canevas en fonction de la fenêtre de page PDF.

Page de rendu

Maintenant que nous avons chargé les pages, nous devons être en mesure de les rendre aux éléments DOM. Pour ce faire, nous compterons sur la fonctionnalité de rendu de PDF.JS. La bibliothèque PDF.js Viewer a une API asynchrone dédiée aux pages de rendu; leur site Web a un excellent exemple montrant comment créer un objet RenderContext et le transmettre à la méthode de rendu PDF.js. Nous extrassons ce code de l'exemple et l'enroulons dans une fonction de rendu:

Implémentez le défilement

Pour offrir une expérience familière et transparente, nos composants doivent afficher la page comme des parties d'un document entièrement défilable. Nous pouvons le faire en faisant en sorte que notre conteneur ait une hauteur fixe avec un débordement de parchemin, qui peut être réalisé via CSS.

Pour maximiser les performances des grands documents, nous ferons les choses suivantes. Tout d'abord, nous utiliserons TaskQueue d'Aurelia pour modifier le DOM. Deuxièmement, nous suivrons la page que PDF.js a rendu afin qu'il n'ait pas à refaire le travail qu'il a fait. Enfin, nous rendrons la page visible uniquement après que le défilement s'arrête en utilisant le comportement contraignant du débouchement d'Aurelia. Voici comment nous courirons lors du défilement:

Atteindre la mise à l'échelle

Lorsque nous évoluons, nous voulons mettre à jour le niveau de zoom actuel. Nous le ferons dans le gestionnaire de propriétés Scalechanged. Fondamentalement, nous redimensions tous les éléments de la toile pour refléter la nouvelle taille de la fenêtre pour chaque page d'une échelle donnée. Nous renforcerons ensuite ce qui est affiché dans la fenêtre actuelle et redémarrerons la boucle.

Le résultat final

passons en revue nos objectifs:

1. Nous voulons que les utilisateurs puissent charger des documents, faire défiler et zoomer / sortir avec de bonnes performances.
2. Nous voulons pouvoir lier bidirectionnellement les propriétés de la visionneuse (telles que la page actuelle et le niveau de zoom actuel) aux propriétés de l'application.
3. Nous voulons que ce spectateur soit un composant réutilisable; nous voulons pouvoir facilement placer plusieurs téléspectateurs dans la demande sans conflit.

Le code final peut être trouvé dans notre référentiel GitHub, ainsi qu'une démo du code terminé ici. Bien qu'il y ait encore place à l'amélioration, nous avons atteint notre objectif!

(Le contenu suivant est essentiellement cohérent avec le texte d'origine, mais certaines phrases ont été ajustées en détail pour maintenir la ma?trise et la lisibilité et éviter la duplication.)

Analyse post-projet et amélioration

Il y a toujours de la place à l'amélioration. Voici quelques choses que je souhaite mettre à niveau dans PDF Viewer Implémentation:

Créer un plugin

Aurelia fournit un système de plug-in. La conversion de cette preuve de concept en plugin Aurelia en fera une ressource hors utilisation pour toute application Aurelia. Le référentiel Aurelia Github fournit un projet de squelette de plugin qui sera un bon point de départ. De cette fa?on, d'autres peuvent utiliser cette fonctionnalité sans la reconstruire!

optimal

Le traitement des fichiers PDF dans les applications Web a toujours été très délicat. Mais avec les ressources disponibles aujourd'hui, nous pouvons réaliser plus que jamais en combinant les bibliothèques et leurs capacités. Aujourd'hui, nous avons vu un exemple de visionneuse PDF de base - une visionneuse qui peut être étendue avec des fonctionnalités personnalisées, car nous avons un contr?le total sur celui-ci. Les possibilités sont infinies! êtes-vous prêt à construire quelque chose? Veuillez me le faire savoir dans les commentaires ci-dessous.

FAQ (FAQ) à propos des composants de la visionneuse PDF personnalisée Aurelia

(Le contenu suivant est essentiellement cohérent avec le texte d'origine, mais certaines phrases ont été ajustées en détail pour maintenir la ma?trise et la lisibilité et éviter la duplication.)

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!