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  , 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  .   Bibliothèque PDF JavaScript   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  framework web pour le développement backend,  à des fins de style, et  pour intégrer la fonctionnalité PDF.   Exprimer   CSS pur   SDK PDF de Foxit  Conditions préalables  version 8+ et  version 5+   NodeJSName   MNP  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   et des fichiers de modèle   . .gitignore de guidon  Ajoutez le package   npm (à utiliser pour accéder à votre clé de licence Foxit et à votre numéro de série) et installez les dépendances d'Express : dotenv   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   . Ensuite, créez un nouveau fichier dans le répertoire racine de votre application Web appelé   et ajoutez les deux valeurs : examples/license-key.js .env   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   du SDK Foxit PDF que vous avez téléchargé et collez-le dans le répertoire   de votre application Web. Désormais, la bibliothèque Foxit JavaScript PDF sera disponible dans votre application Web. lib/ public/  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   pour transmettre la clé de licence et le numéro de série à la vue : routes/index.js   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   soient disponibles, vous devez inclure la bibliothèque   qui charge les variables de votre fichier   . Ouvrez   et ajoutez ce qui suit en haut du fichier : process.env dotenv .env app.js   require('dotenv').config(); ...  Vos   et   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. LICENSE_SN LICENSE_KEY  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   et remplacez-le par ce qui suit : views/layout.hbs   <!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/purecss@2.0.3/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   , mais vous pouvez utiliser n'importe quel autre cadre de style frontal que vous connaissez. PureCSS  Ouvrez le fichier   et remplacez-le par le suivant : views/index.hbs   <h1>PDF Previewer</h1> <p>Use the form below to preview any password-protected PDF file in this web application.</p>  <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>  <div id="pdf-viewer"></div>  <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   , cela agit comme un bouton de téléchargement joliment stylé. Ensuite, la balise   enveloppe le lecteur PDF Foxit qui est utilisé dans la fonction   dans le JavaScript personnalisé. La dernière section de ce fichier charge la classe   de Foxit et l'initialise à l'aide du code à l'intérieur des balises   . <label> <div id=”pdf-viewer”> pdfViewer.init PDFViewCtrl.PDFViewer <script>  La fonctionnalité de l'application est presque terminée, mais avant de tester, ouvrez le fichier   et remplacez-le par ce qui suit : public/stylesheets/style.css   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   depuis votre terminal. Node lancera un serveur et votre application Web sera disponible sur   .  npm start 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   de Foxit renvoie une   , si vous souhaitez savoir quand elle se résout, ajoutez un rappel aux méthodes   ou   . pdfViewer.openPDFByFile promesse then catch  Dans votre fichier   , remplacez la ligne   par la ligne ci-dessous : views/index.hbs pdfViewer.openPDFByFile…   ...    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   . Dans votre fichier   , ajoutez ce qui suit : catch public/stylesheets/style.css   ... #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  et un large éventail d'exemples pour vous aider à créer diverses applications.   Documentation  Il convient de noter que Foxit fournit des SDK PDF non seulement pour les applications Web, mais également pour  . 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.   d'autres plates-formes telles que les applications mobiles et natives  Également publié   . ici

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Free Trial

Now Hiring

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Le modèle Bitcoin UTXO, alimentant un écosystème unique

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Comment améliorer votre flux de travail par 10 : 17 applications essentielles

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Le modèle Bitcoin UTXO, alimentant un écosystème unique

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Comment améliorer votre flux de travail par 10 : 17 applications essentielles

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps