Un guide pour afficher des fichiers PDF protégés par mot de passe dans une application Web

Les fichiers PDF sont largement utilisés dans les environnements professionnels, ce qui fait de leur sécurité un aspect crucial de nombreux flux de travail. Lors du développement d'une application Web qui implique l'ouverture de fichiers PDF, il est probable que vous rencontriez des documents protégés par mot de passe. Cependant, la mise en œuvre de cette fonctionnalité à partir de zéro peut prendre du temps et entraîner des coûts de maintenance importants, ce qui peut ne pas correspondre à la feuille de route actuelle de votre équipe.

Avec Foxit Bibliothèque PDF JavaScript , la présentation de fichiers PDF dans une application basée sur un navigateur devient une tâche transparente. Dans ce didacticiel pas à pas, vous apprendrez à configurer une application Node qui exploite la puissance de Foxit PDF SDK for Web. Cette intégration vous permet d'ouvrir sans effort des fichiers PDF protégés par mot de passe directement dans le navigateur, ce qui permet aux utilisateurs autorisés de prévisualiser les documents. Pour ceux qui préfèrent ignorer le didacticiel et accéder à une version entièrement fonctionnelle de l'application, vous pouvez la trouver facilement disponible sur GitHub .

Création d'une application Web pour afficher des fichiers PDF protégés par mot de passe

HTML fournit des fonctionnalités de téléchargement de fichiers intégrées pratiques qui permettent aux utilisateurs d'interagir avec les fichiers de leurs machines locales dans le navigateur. Cependant, l'affichage de fichiers PDF à l'aide de JavaScript peut être un peu plus complexe, en particulier lorsqu'il s'agit de protection par mot de passe. Dans ce didacticiel complet, vous allez créer une application Web comprenant un formulaire de téléchargement PDF et un champ de mot de passe facultatif. Lorsqu'un PDF protégé par mot de passe est téléchargé et que le mot de passe correct est entré, les utilisateurs pourront prévisualiser le fichier de manière transparente. D'autre part, si un mot de passe incorrect est fourni, un message d'erreur s'affichera, invitant les utilisateurs à réessayer.

Pour développer cette application, vous utiliserez le Exprimer framework web pour le développement backend, CSS pur à des fins de style, et SDK PDF de Foxit pour intégrer la fonctionnalité PDF.

Conditions préalables

• NodeJSName version 8+ et MNP version 5+
• SDK Foxit PDF pour le Web ( le téléchargement d'essai gratuit est disponible ici )
• Votre clé de licence Foxit et votre numéro de série

Création d'une nouvelle application Express

Le générateur Express facilite la configuration d'une nouvelle application. Exécutez simplement la commande suivante dans votre terminal :

 npx express-generator --git --view=hbs

Cette commande créera une nouvelle application avec un fichier .gitignore et des fichiers de modèle de guidon .

Ajoutez le package dotenv npm (à utiliser pour accéder à votre clé de licence Foxit et à votre numéro de série) et installez les dépendances d'Express :

 npm i dotenv && npm i

Après avoir téléchargé Foxit PDF SDK pour le Web, vous trouverez votre clé de licence et votre numéro de série dans le fichier examples/license-key.js . Ensuite, créez un nouveau fichier dans le répertoire racine de votre application Web appelé .env et ajoutez les deux valeurs :

 LICENSE_SN="" LICENSE_KEY=""

Copiez la bibliothèque Foxit dans votre application Web afin de pouvoir y accéder depuis le frontal. Ensuite, copiez le répertoire lib/ du SDK Foxit PDF que vous avez téléchargé et collez-le dans le répertoire public/ de votre application Web. Désormais, la bibliothèque Foxit JavaScript PDF sera disponible dans votre application Web.

Enfin, vous ne voulez pas que des informations sensibles ou des packages propriétaires se retrouvent dans le contrôle de version, alors ajoutez ce qui suit à votre fichier .gitignore :

 ... public/lib/ .env

Une fois que votre application Web a mis en place toutes les dépendances nécessaires, vous pouvez procéder à la création de la route responsable de l'affichage de l'aperçu PDF à l'aide de Foxit.

Configuration de l'itinéraire

Chaque page d'une application Express a un itinéraire, y compris la page de téléchargement PDF que vous allez créer dans cette démo. Mettez à jour le fichier routes/index.js pour transmettre la clé de licence et le numéro de série à la vue :

 var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('index', { licenseSN: process.env.LICENSE_SN, licenseKey: process.env.LICENSE_KEY, }); }); module.exports = router;

Vous permettant de mettre à jour facilement vos informations d'identification sur le serveur, sans avoir besoin d'informations d'identification en dur nécessitant un changement de code. En ajoutant une couche d'authentification à votre application Express, vous pouvez contrôler l'accès aux identifiants Foxit et limiter la visibilité aux utilisateurs autorisés.

Avant que les variables process.env soient disponibles, vous devez inclure la bibliothèque dotenv qui charge les variables de votre fichier .env . Ouvrez app.js et ajoutez ce qui suit en haut du fichier :

 require('dotenv').config(); ...

Vos LICENSE_SN et LICENSE_KEY sont stockées en toute sécurité et transmises au frontal uniquement lorsque cela est nécessaire. Ensuite, vous aborderez la partie affichage de l'application Web.

Télécharger et afficher des PDF

Le SDK PDF de Foxit gérera la majorité du travail impliqué dans la vérification du mot de passe et l'affichage du PDF à l'utilisateur, mais vous devez administrer l'interface utilisateur pour les entrées de fichier et de mot de passe. Avant cela, vous devez mettre à jour la mise en page afin qu'elle inclue les styles de base, puis vous pouvez mettre à l'échelle la "fenêtre". Cela se traduira par un aperçu PDF correctement dimensionné pour l'affichage de l'utilisateur.

Ouvrez le fichier views/layout.hbs et remplacez-le par ce qui suit :

 <!DOCTYPE html> <html lang="en"> <head> <title>Foxit PDF Previewer</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous"> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <div class="container"> {{{body}}} </div> </body> </html>

Cela chargera la bibliothèque de style PureCSS , mais vous pouvez utiliser n'importe quel autre cadre de style frontal que vous connaissez.

Ouvrez le fichier views/index.hbs et remplacez-le par le suivant :

 <h1>PDF Previewer</h1> <p>Use the form below to preview any password-protected PDF file in this web application.</p> <!-- PDF Upload form --> <form class="pure-form"> <fieldset>   <input type="password" id="password" placeholder="Enter PDF Password" />   <input class="original-pdf-upload-button" type="file" name="file" id="file" accept=".pdf,.fdf,.xfdf" multiple="multiple" />   <label class="pure-button new-pdf-upload-button" for="file">Select a PDF file</label> </fieldset> </form> <!-- PDF Display Div --> <div id="pdf-viewer"></div> <!-- Foxit and custom JavaScript --> <script src="/lib/PDFViewCtrl.full.js"></script> <script> var PDFViewer = PDFViewCtrl.PDFViewer; var pdfViewer = new PDFViewer({    libPath: '/lib',    jr: {      licenseSN: "{{ licenseSN }}",      licenseKey: "{{ licenseKey }}",   }, });  pdfViewer.init('#pdf-viewer');  document.getElementById('file').onchange = function (e) {   if (!this.value) {      return;   }   var pdf,fdf;   for (var i = e.target.files.length; i--;) {     var file = e.target.files[i];     var filename = file.name;     if (/\.pdf$/i.test(filename)) {       pdf = file     } else if (/\.(x)?fdf$/i.test(filename)) {        fdf = file     }   }   var options = {password: '', fdf: {file: fdf}};   if (document.getElementById('password').value) {      options.password = document.getElementById('password').value;      document.getElementById('password').value = '';   }    pdfViewer.openPDFByFile(pdf, options);    this.value = ''; }; </script>

Ce fichier a trois objectifs. Tout d'abord, il comprend un formulaire de téléchargement PDF avec un champ de mot de passe. L'élément d'entrée de téléchargement de fichier a un <label> , cela agit comme un bouton de téléchargement joliment stylé. Ensuite, la balise <div id=”pdf-viewer”> enveloppe le lecteur PDF Foxit qui est utilisé dans la fonction pdfViewer.init dans le JavaScript personnalisé. La dernière section de ce fichier charge la classe PDFViewCtrl.PDFViewer de Foxit et l'initialise à l'aide du code à l'intérieur des balises <script> .

La fonctionnalité de l'application est presque terminée, mais avant de tester, ouvrez le fichier public/stylesheets/style.css et remplacez-le par ce qui suit :

 body { background-color: #f7f7f7; color: #333333; } .container { background-color: #ffffff; margin: 0 auto; padding: 30px; } /* File upload button styling */ .original-pdf-upload-button { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .new-pdf-upload-button { top: -2px; position: relative; }

Vous permettant de styliser le bouton de téléchargement PDF afin qu'il ait une apparence cohérente avec les autres boutons PureCSS, et ajoute également un peu de rembourrage à votre application.

Pour tester votre application, enregistrez d'abord votre travail, puis exécutez npm start depuis votre terminal. Node lancera un serveur et votre application Web sera disponible sur localhost:3000 .

Pour gérer le scénario dans lequel un utilisateur entre un mot de passe incorrect lors du téléchargement d'un fichier PDF protégé par mot de passe, vous pouvez améliorer le code existant pour afficher un message d'erreur et permettre à l'utilisateur de réessayer. Voici comment implémenter cette fonctionnalité :

Gestion des erreurs

La méthode pdfViewer.openPDFByFile de Foxit renvoie une promesse , si vous souhaitez savoir quand elle se résout, ajoutez un rappel aux méthodes then ou catch .

Dans votre fichier views/index.hbs , remplacez la ligne pdfViewer.openPDFByFile… par la ligne ci-dessous :

 ...    pdfViewer.openPDFByFile(pdf, options)      .catch(error => {        console.error(error);        document.getElementById('wrong-password').style.display = 'block';     }); ...

Ajoutez un nouvel élément de paragraphe en haut du fichier appelé id=”wrong-password” :

 <p id="wrong-password" class="error"><strong>Whoops!</strong> It looks like the password you entered was incorrect. Please enter a password and try uploading your file again. </p> ...

Enfin, vous devrez ajouter du style afin que le message d'erreur ne s'affiche qu'après l'appel de la méthode catch . Dans votre fichier public/stylesheets/style.css , ajoutez ce qui suit :

 ... #wrong-password { display: none; } .error { background-color: #f5c0c0; color: #792525; padding: 10px; }

Si vous entrez un mot de passe incorrect (ou laissez le champ du mot de passe vide) et qu'un PDF protégé par mot de passe a été téléchargé, vous verrez un message d'erreur, comme vous pouvez le voir ci-dessous :

Dans ce didacticiel, vous avez appris à créer une application Web Node sécurisée qui permet aux utilisateurs de prévisualiser des fichiers PDF protégés par mot de passe dans leur navigateur. En tirant parti du SDK Foxit PDF, vous pouvez réduire considérablement le temps et les efforts de développement. Foxit PDF SDK offre une vaste Documentation et un large éventail d'exemples pour vous aider à créer diverses applications.

Il convient de noter que Foxit fournit des SDK PDF non seulement pour les applications Web, mais également pour d'autres plates-formes telles que les applications mobiles et natives . Cela signifie que vous pouvez utiliser la puissance de Foxit PDF SDK dans différents environnements, garantissant ainsi des capacités de traitement PDF cohérentes et fiables dans toutes vos applications.