Il est étonnant de constater la quantité d’informations que nous avons aujourd’hui stockées au format PDF. Selon l’association PDF, environ 2,5 trillions de PDF sont créés chaque année, ce qui représente 6 % du web. Cependant, en tant que développeur web, les PDF sur un site web peuvent présenter une variété de défis :
- Les expériences de visualisation varient grandement selon les utilisateurs et les appareils car elles dépendent d’un visualiseur PDF. Qu’il soit intégré aux navigateurs web ou aux bibliothèques en ligne gratuites, certains visionneurs sont meilleurs que d’autres. Adobe Acrobat Reader est généralement la norme universelle pour visualiser correctement les PDF.
- Il devient difficile pour moi de pouvoir intégrer les PDF dans le reste de mon site web. Le plus souvent, les PDF inviteraient les utilisateurs à les télécharger sur leurs appareils.
- La conversion des PDF en HTML est difficile et peu fiable. Si je veux présenter du contenu à l’intérieur d’une page web qui est au format PDF, souvent je pourrais aplatir le PDF pour le rendre plus facile à intégrer.
- Je n’ai aucune visibilité sur la façon dont mon visiteur visualise ces PDF. Cela signifie que je n’ai aucune idée si quelqu’un lit certaines pages, combien de temps il passe sur ces pages, etc.
Heureusement, Adobe a publié Adobe PDF Embed API (PDF Embed), un moyen facile pour vous d’incorporer un PDF directement dans votre site Web avec juste un simple bout de code. Son utilisation est entièrement gratuite et le rendu s’effectue côté client dans votre application web. Vous n’avez pas besoin d’apprendre une bibliothèque PDF sophistiquée, et c’est très facile à faire. Aucune donnée n’est rendue sur les serveurs d’Adobe. En fait, vous pouvez même apprendre à jouer avec ici.
Rien ! C’est la plus grande chose à ce sujet. Vous n’avez besoin de rien d’autre qu’une page web pour utiliser PDF Embed.
Utilisation du site de démonstration pour essayer l’API PDF Embed
.
La façon la plus simple de se familiariser avec le PDF Embed est de l’essayer réellement sur le site de démonstration. C’est une ressource facile pour commencer car elle vous permet de :
- Voir en temps réel les différents modes d’intégration disponibles pour vos PDF.
- Personnaliser les fonctionnalités que vous souhaitez intégrer à la visionneuse, comme les outils d’annotation, le téléchargement de PDF, l’impression de PDF, les contrôles de page, etc.
- Génère un code pour que vous puissiez le coller directement dans votre site Web.
Avoir votre ID client
Si vous voulez essayer le PDF Embed dans votre propre code, il fonctionne sans ID client lorsque vous l’utilisez localement. Cependant, si vous voulez réellement l’incorporer dans votre site Web, vous devrez obtenir un ID client. Obtenez votre ID client ici.
Voici quelques conseils importants :
- Pour créer un identifiant client, vous devrez disposer d’un identifiant Adobe. Si vous n’en avez pas, vous pouvez vous inscrire ici en utilisant une adresse e-mail, un identifiant Google, Facebook ou Apple.
- Vous devez définir votre domaine d’application pour que cela fonctionne.
Une fois que vous avez créé votre ID client, vous voudrez le copier et l’utiliser dans votre code.
NOTE : Bien que vous puissiez modifier vos configurations dans la console Adobe.io, vous voudrez vous rendre sur le lien pour créer votre clé. Si vous créez votre clé depuis la console Adobe.io, elle ne vous donnera pas la possibilité de définir votre domaine.
Choisir votre mode d’intégration
L’un des aspects puissants du PDF Embed est que vous avez le choix entre différents modes d’intégration :
Full Window
.
Le mode d’affichage Full Window vous permet de prendre une expérience de visualisation similaire à Adobe Acrobat Reader sur votre ordinateur et de l’intégrer à votre site web. Je trouve cela idéal lors de la visualisation de documents longs, ou si je veux avoir une expérience de visualisation PDF familière dans mon interface utilisateur.
Contenant de taille
.
Les conteneurs de taille sont parfaits pour du contenu tel que des présentations PowerPoint qui ont été converties en PDF, ou une série d’instructions. Je trouve cette expérience moins idéale si vous intégrez des PDF de longue durée.
En-Ligne
La vue In-Line peut aider les concepteurs à intégrer leurs créations dans une page Web sans avoir à les reconstruire ou à les aplatir en une image. La vue In-Line prend votre PDF et le rend en ligne en tant que HTML. J’aime ce mode d’intégration lorsque vous voulez afficher du contenu comme des infographies que vous avez conçues dans Illustrator, InDesign, etc. et exportées au format PDF, mais que vous voulez qu’elles soient toujours consultables et comportent des hyperliens sans avoir à vous soucier d’une nouvelle conception pour le web.
Cadre lumineux
.
Lightbox ouvre la visionneuse PDF au-dessus de la page Web pour offrir une vue plus ciblée. Ce mode est idéal lorsque vous avez des liens vers des fichiers PDF dans l’ensemble de votre site Web, mais que vous souhaitez contrôler l’expérience d’affichage, recueillir des analyses et déclencher des événements en fonction de la façon dont votre public interagit avec les fichiers PDF que vous avez affichés.
Générer votre code
Lorsque vous utilisez le site de démonstration et que vous cliquez sur Générer le code, cela ressemblera à quelque chose comme ceci :
Pour commencer, vous voudrez remplacer les éléments suivants :
- Remplacer <YOUR_CLIENT_ID> avec l’identifiant du client que vous avez généré.
- Remplacer le paramètre url avec l’URL de votre PDF que vous voulez visualiser.
NOTE : Parce que PDF Embed rend côté client dans le navigateur, il honorera toutes les restrictions Cross-Domain définies, donc vous pouvez avoir besoin de vous assurer que vos en-têtes permettent les liens cross-domain. - Changez fileName par le nom de votre document. Celui-ci apparaîtra dans la visionneuse.
Une fois que vous aurez fait cela, vous serez en mesure d’intégrer votre PDF dans votre site Web. C’est aussi simple que cela !
Exemples qui utilisent le SDK de services aujourd’hui
Il existe un certain nombre d’applications qui utilisent déjà le SDK de services aujourd’hui :
- Composant de visualisation PDF pour AEM
- PDF like a boss
- Plugin Microsoft SharePoint
- Adobe Acrobat for G Suite
Conclusion
PDF Embed permet vraiment beaucoup de flexibilité pour exploiter les PDF avec vos sites web. Il y a beaucoup plus de choses que vous pouvez faire avec lui à partir de l’analyse, des écouteurs d’événements, et plus encore que vous pouvez en apprendre davantage dans cette documentation.
Nous voulons entendre parler de vous
Une fois que vous avez jeté un coup d’œil au PDF Embed, nous aimerions entendre vos pensées ! Participez au forum Adobe Document Cloud pour donner votre avis, ou répondez à cet article !
MISE À JOUR (07/07/2020) : Mise à jour pour ajouter le nouveau mode d’intégration Lightbox et ajout d’une nouvelle image d’en-tête.
MISE À JOUR (31/07/2020) : Mise à jour pour refléter la nouvelle image de marque.
La nouvelle image de marque.