Une meilleure méthode pour incorporer les documents PDF dans vos pages Web

  Dans cet article, vous allez apprendre à intégrer du contenu des pages PDF dans votre site web ou blog à l'aide du nouveau Adobe PDF viewer pour offrir à vos lecteurs une belle expérience de lecture PDF améliorée. 

 Comment intégrer alors un document PDF dans votre site pour qu'il s'affiche en ligne? L'une des options populaires consiste à uploader le fichier PDF vers un service de stockage en ligne comme OneDrive (de Microsoft), Google Drive,...etc, le rendre ensuite visible publiquement, puis copier le code IFRAME fourni par ces service puis le coller afin d'incorporer rapidement le document dans n'importe quel site web ou blog.

 Ce qui suit est un exemple de code d'intégration PDF pour Google Drive qui fonctionne sur tous les
 navigateurs.
<iframe src="https://docs.google.com/document/d/e/
2PACX-1vSufFhCiVEiTNt6BB69PGuSFgIjRRa6puga0W89cY3z-HhBxCKRegqQQ8piRpez3b9e0-p1gn9-nid1/pub?embedded=true"></iframe>
 C'est la méthode la plus facile pour intégrer des fichiers PDF, elle est très facile, mais l'inconvénient est que vous ne pourrez pas contrôler la disposition des fichiers PDF dans vos pages Web.

 Si vous voulez profiter d'une lecture plus personnalisée et immersive de vos PDF sur votre site Web, consultez le nouveau SDK Adobe View . il fait partie de la plate-forme Adobe Document Cloud, en plus il est gratuit.

 Voici quelques fonctionnalités uniques qui caractérisent cette solution d'intégration PDF:

1- Vous pouvez ajouter des outils d'annotation dans PDF viewer. Tout le monde peut annoter le PDF intégré et télécharger ainsi le fichier modifié.

 2- Si vous avez intégré un long document avec plusieurs pages, les lecteurs peuvent utiliser l'option de "miniature" pour passer rapidement à n'importe quelle page.

 3- PDF viewer peut être personnalisé pour masquer les options de téléchargement et d'impression de fichiers PDF.

 4- Vous aurez la possibilité de savoir combien de personnes ont vu votre fichier PDF et comment elles ont interagi avec le document grace à des analyses intégrées.

 5- Et la fonctionnalité la plus préférée de ViewSDK est le mode d'intégration en ligne, je vous explique les détails en ce qui suit:

 Comment afficher les pages PDF en ligne comme des images et des vidéos? 

 Sous le service en ligne SDK Adobe view, toutes les pages du document PDF intégré sont affichées en même temps afin que le visiteur de votre site ne défile pas à un autre document.Pour l'utilisateur,les commandes PDF sont cachées pour l'utilisateur et les pages PDF se mélangent avec des images et d'autres contenus HTML sur votre page Web (site ou blog). Grace à cette technique vous pouvez avoir plusieurs pages dans un seul document PDF, mais toutes sont affichées en même temps comme une seule longue page web offrant ainsi une navigation fluide.

 Comment intégrer donc des fichiers PDF grace au SDK Adobe View?:
 Durant l'opération, il vous faut quelques étapes supplémentaires pour l'utilisation de cet Adobe SDK View. Accédez d'aboard à adobe.io et saisissez vos informations d'autorisation à vous identifier en utilisant le nom de votre site web. Veuillez noter que les informations d'identification ne sont valables que pour un seul domaine. Par conséquent, si vous possédez plusieurs sites Web, vous aurez besoin des propres informations d'autorisation pour chaque site.

 Ensuite, ouvrez la page Playgroud pour générer votre code d'intégration, Vous devez ensuite remplacer le clientId par votre ensemble d'informations d'identification.L'URL dans l'exemple de code doit pointer vers l'emplacement de votre fichier PDF (Google drive ou autres).

<div id="adobe-dc-view" style="width: 800px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function () {
        var adobeDCView = new AdobeDC.View({
            clientId: "<<YOUR_CLIENT_ID>>",
            divId: "adobe-dc-view"
        });
        adobeDCView.previewFile({
            content: { location: { url: "<<PDF Location>>" } },
            metaData: { fileName: "<<PDF File Name>>" }
        }, {
            embedMode: "IN_LINE",
            showDownloadPDF: false,
            showPrintPDF: false
        });
    });
</script>
Si vous voulez d'informations et exemples, consultez les documents officiels et le référentiel de code ici.

Enregistrer un commentaire