Los archivos PDF se utilizan ampliamente en entornos comerciales, lo que hace que su seguridad sea un aspecto crucial de numerosos flujos de trabajo. Al desarrollar una aplicación web que implique abrir archivos PDF, es probable que encuentre documentos protegidos con contraseña. Sin embargo, implementar esta funcionalidad desde cero puede llevar mucho tiempo e incurrir en costos de mantenimiento significativos, que podrían no alinearse con la hoja de ruta actual de su equipo.  con Foxit  , presentar archivos PDF en una aplicación basada en navegador se convierte en una tarea sencilla. En este tutorial paso a paso, aprenderá cómo configurar una aplicación Node que aprovecha el poder de Foxit PDF SDK para Web. Esta integración le permite abrir sin esfuerzo archivos PDF protegidos con contraseña directamente en el navegador, otorgando a los usuarios autorizados la posibilidad de obtener una vista previa de los documentos. Para aquellos que prefieran saltarse el tutorial y acceder a una versión completamente funcional de la aplicación, pueden encontrarla fácilmente  .   Biblioteca PDF JavaScript   disponible en GitHub   Creación de una aplicación web para mostrar archivos PDF protegidos con contraseña  HTML proporciona prácticas funciones integradas de carga de archivos que permiten a los usuarios interactuar con archivos desde sus máquinas locales dentro del navegador. Sin embargo, mostrar archivos PDF usando JavaScript puede ser un poco más complicado, especialmente cuando se trata de protección con contraseña. En este completo tutorial, construirá una aplicación web que comprende un formulario de carga de PDF y un campo de contraseña opcional. Cuando se carga un PDF protegido con contraseña y se ingresa la contraseña correcta, los usuarios podrán obtener una vista previa del archivo sin problemas. Por otro lado, si se proporciona una contraseña incorrecta, se mostrará un mensaje de error que solicitará a los usuarios que vuelvan a intentarlo.  Para desarrollar esta aplicación, utilizará el  framework web para desarrollo backend,  con fines de estilo, y  para integrar la funcionalidad PDF.   Expresar   CSS puro   SDK PDF de Foxit  requisitos previos  versión 8+ y  versión 5+   NodoJS   MNP  Foxit PDF SDK para Web (  )   la descarga de prueba gratuita está disponible aquí  Su clave de licencia y número de serie de Foxit  Creación de una nueva aplicación Express  El generador Express facilita la configuración de una nueva aplicación. Simplemente ejecute el siguiente comando en su terminal:   npx express-generator --git --view=hbs  Este comando creará una nueva aplicación con un archivo   y archivos de plantilla   . .gitignore de Handlebars  Agregue el paquete   npm (úselo para acceder a su clave de licencia y número de serie de Foxit) e instale las dependencias de Express: dotenv   npm i dotenv && npm i  Después de descargar Foxit PDF SDK for Web, encontrará su clave de licencia y número de serie en el archivo   . Luego, cree un nuevo archivo en el directorio raíz de su aplicación web llamado   y agregue los dos valores: examples/license-key.js .env   LICENSE_SN="" LICENSE_KEY=""  Copie la biblioteca de Foxit en su aplicación web para que pueda acceder a ella desde el front-end. A continuación, copie el directorio   de Foxit PDF SDK que descargó y péguelo en el directorio   de su aplicación web. Ahora la biblioteca PDF de JavaScript de Foxit estará disponible en su aplicación web. lib/ public/  Por último, no desea que la información confidencial o los paquetes propietarios terminen en el control de versiones, así que agregue lo siguiente a su archivo   : .gitignore   ... public/lib/ .env  Una vez que su aplicación web tenga todas las dependencias necesarias, puede proceder a crear la ruta responsable de mostrar la vista previa de PDF usando Foxit.  Configuración de la ruta  Cada página de una aplicación Express tiene una ruta, incluida la página de carga de PDF que creará en esta demostración. Actualice el archivo   para pasar la clave de licencia y el número de serie a la vista: 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;  Permitiéndole actualizar fácilmente sus credenciales en el servidor, sin necesidad de credenciales de código duro que requieran un cambio de código. Al agregar una capa de autenticación a su aplicación Express, puede controlar el acceso a las credenciales de Foxit y restringir la visibilidad a los usuarios autorizados.  Antes de que las variables   estén disponibles, debe incluir la biblioteca   que carga las variables de su archivo   . Abra   y agregue lo siguiente en la parte superior del archivo: process.env dotenv .env app.js   require('dotenv').config(); ...  Su   y   se almacenan de forma segura y se pasan al front-end solo cuando es necesario. A continuación, abordará la parte de visualización de la aplicación web. LICENSE_SN LICENSE_KEY  Carga y visualización de archivos PDF  El PDF SDK de Foxit se encargará de la mayor parte del trabajo relacionado con la verificación de la contraseña y la visualización del PDF al usuario, pero debe administrar la interfaz de usuario para las entradas de archivos y contraseñas. Antes de esto, debe actualizar el diseño para que incluya estilos básicos y luego pueda escalar la 'ventana gráfica'. Esto dará como resultado una vista previa en PDF con el tamaño correcto para la pantalla del usuario.  Abra el archivo   y reemplácelo con lo siguiente: 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>  Esto cargará la biblioteca de estilo   , pero puede usar cualquier otro marco de estilo de front-end con el que esté familiarizado. PureCSS  Abra el archivo   y reemplácelo con lo siguiente: 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>  Este archivo tiene tres propósitos. Primero, incluye un formulario de carga de PDF con un campo de contraseña. El elemento de entrada de carga de archivos tiene un   , que actúa como un botón de carga con un estilo agradable. A continuación, la etiqueta   envuelve el lector de PDF Foxit que se usa en la función   en el JavaScript personalizado. La última sección de este archivo carga la clase   de Foxit y la inicializa usando el código dentro de las etiquetas   . <label> <div id=”pdf-viewer”> pdfViewer.init PDFViewCtrl.PDFViewer <script>  La funcionalidad de la aplicación está casi completa, pero antes de realizar la prueba, abra el archivo   y reemplácelo con lo siguiente: 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; }  Permitiéndole diseñar el botón de carga de PDF para que tenga una apariencia consistente con los otros botones de PureCSS, y también agrega un poco de relleno a su aplicación.  Para probar su aplicación, primero guarde su trabajo y luego ejecute   desde su terminal. Node activará un servidor y su aplicación web estará disponible en   .  npm start localhost:3000  Para manejar el escenario en el que un usuario ingresa una contraseña incorrecta mientras carga un archivo PDF protegido con contraseña, puede mejorar el código existente para mostrar un mensaje de error y permitir que el usuario intente nuevamente. Así es como puede implementar esta funcionalidad:   Manejo de errores  El método   de Foxit devuelve una   , si desea saber cuándo se resuelve, agregue una devolución de llamada a los métodos   o   . pdfViewer.openPDFByFile promesa then catch  Dentro de su archivo   , reemplace la línea   con lo siguiente: views/index.hbs pdfViewer.openPDFByFile…   ...    pdfViewer.openPDFByFile(pdf, options)      .catch(error => {        console.error(error);        document.getElementById('wrong-password').style.display = 'block';     }); ...  Agregue un nuevo elemento de párrafo en la parte superior del archivo llamado   : 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> ...  Por último, deberá agregar algo de estilo para que el mensaje de error solo se muestre y luego se llame al método   . Dentro de su archivo   , agregue lo siguiente: catch public/stylesheets/style.css   ... #wrong-password { display: none; } .error { background-color: #f5c0c0; color: #792525; padding: 10px; }  Si ingresa una contraseña incorrecta (o deja el campo de contraseña en blanco) y se ha subido un PDF protegido con contraseña, verá un mensaje de error, como puede ver a continuación:  En este tutorial, ha aprendido a crear una aplicación web segura de Node que permite a los usuarios obtener una vista previa de archivos PDF protegidos con contraseña en su navegador. Al aprovechar Foxit PDF SDK, puede reducir significativamente el tiempo y el esfuerzo de desarrollo. Foxit PDF SDK ofrece una amplia  y una amplia gama de ejemplos para ayudarlo a crear varias aplicaciones.   documentación  Vale la pena señalar que Foxit proporciona SDK de PDF no solo para aplicaciones web sino también para  . Esto significa que puede utilizar el poder de Foxit PDF SDK en diferentes entornos, lo que garantiza capacidades de procesamiento de PDF consistentes y confiables en todas sus aplicaciones.   otras plataformas, como aplicaciones móviles y nativas  También publicado   . aquí

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

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Boost your HackerNoon story @ $159.99! 🚀

Una guía para mostrar archivos PDF protegidos con contraseña en una aplicación web

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Una breve introducción a la teoría del cerebro de Boltzmann

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Una breve introducción a la teoría del cerebro de Boltzmann

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps