PDFs are extensively utilized in business settings, making their security a crucial aspect of numerous workflows. When developing a web application that involves opening PDFs, it’s likely that you will encounter password-protected documents. However, implementing this functionality from scratch can be time-consuming and incur significant maintenance costs, which might not align with your team’s current roadmap. With Foxit’s , presenting PDFs in a browser-based application becomes a seamless task. In this step-by-step tutorial, you will learn how to configure a Node application that harnesses the power of Foxit PDF SDK for Web. This integration allows you to effortlessly open password-protected PDFs directly in the browser, granting authorized users the ability to preview the documents. For those who prefer to skip the tutorial and access a fully functional version of the application, you can find it readily . JavaScript PDF library available on GitHub Building a Web Application to Display Password Protected PDFs HTML provides convenient built-in file upload features that enable users to interact with files from their local machines within the browser. However, displaying PDFs using JavaScript can be a bit more intricate, particularly when dealing with password protection. In this comprehensive tutorial, you will construct a web application comprising a PDF upload form and an optional password field. When a password-protected PDF is uploaded, and the correct password is entered, users will be able to preview the file seamlessly. On the other hand, if an incorrect password is provided, an error message will be displayed, prompting users to retry. To develop this application, you will utilize the web framework for backend development, for styling purposes, and for integrating PDF functionality. Express Pure CSS Foxit’s PDF SDK Prerequisites version 8+ and version 5+ NodeJS NPM Foxit PDF SDK for Web ( ) free trial download is available here Your Foxit license key and serial number Creating a New Express App The Express generator makes it easy to set up a new application. Simply run the following command in your terminal: npx express-generator --git --view=hbs This command will create a new application with a file and template files. .gitignore Handlebars Add the npm package ( use to access your Foxit license key and serial number) and install Express’ dependencies: dotenv npm i dotenv && npm i After you’ve downloaded Foxit PDF SDK for Web, you will find your license key and serial number in the file. Next, create a new file at the root directory of your web application called and add the two values: examples/license-key.js .env LICENSE_SN=""
LICENSE_KEY="" Copy the Foxit library into your web application so you can access it from the front end. Next, copy the directory from Foxit PDF SDK you downloaded and paste it into your web application’s directory. Now the Foxit JavaScript PDF library will be available within your web application. lib/ public/ Lastly, you don’t want sensitive info or proprietary packages to end up in version control, so add the below to your file: .gitignore ...
public/lib/
.env Once your web application has all the necessary dependencies in place, you can proceed to create the route responsible for displaying the PDF preview using Foxit. Setting Up The Route Every page in an Express application has a route, including the PDF upload page you’ll create in this demo. Update the file to pass the license key and serial number to the view: 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; Allowing you to easily update your credentials on the server, without needing hard-code credentials that require a code change. By adding an authentication layer to your Express application, you can control access to the Foxit credentials and restrict visibility to authorized users. Before the variables are available, you need to include the library which loads variables from your file. Open and add the following to the top of the file: process.env dotenv .env app.js require('dotenv').config();
... Your and are being securely stored and passed to the front end only when required. Next, you will address the display portion of the web application. LICENSE_SN LICENSE_KEY Uploading and Displaying PDFs Foxit’s PDF SDK will handle the majority of the work involved in checking the password and displaying the PDF to the user, but you need to administer the user interface for both file and password inputs. Prior to this, you need to update the layout so it includes base styles and then you can scale the ‘viewport`. This will result in a PDF preview which is correctly sized to the user’s display. Open the file and replace it with the following: 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> This will load the styling library, but you can use any other front end styling framework you’re familiar with. PureCSS Open the file and replace it with the below: 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> This file serves three purposes. First, it includes a PDF upload form with a password field. The file upload input element has a , this acts as a nicely styled upload button. Next, the tag wraps the Foxit PDF reader which is used in the function in the custom JavaScript. The last section of this file loads Foxit’s class and initializes it using the code inside the tags. <label> <div id=”pdf-viewer”> pdfViewer.init PDFViewCtrl.PDFViewer <script> The application’s functionality is nearly complete, but before you test, open up file and replace with the following: 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; 
} Allowing you to style the PDF upload button so it has a consistent look with the other PureCSS buttons, and also adds a bit of padding to your application. To test your application, first save your work and then run from your terminal. Node will spin up a server, and your web app will be available at . npm start localhost:3000 To handle the scenario where a user enters an incorrect password while uploading a password-protected PDF file, you can enhance the existing code to display an error message and allow the user to try again. Here’s how you can implement this functionality: Handling Errors Foxit’s method returns a , if you would like to know when it resolves, add a callback to the or methods. pdfViewer.openPDFByFile promise then catch Within your file, replace the line with the below: views/index.hbs pdfViewer.openPDFByFile… ... 
    pdfViewer.openPDFByFile(pdf, options) 
      .catch(error => { 
        console.error(error); 
        document.getElementById('wrong-password').style.display = 'block'; 
      }); 
... Add a new paragraph element at the top of the file called : 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> 
... Lastly, you’ll need to add some styling so the error message is only shown then the method is called. Within your file, add the below: catch public/stylesheets/style.css ... 
#wrong-password { 
  display: none; 
} 
.error { 
  background-color: #f5c0c0; 
  color: #792525; 
  padding: 10px; 
} If you enter an incorrect password (or leave the password field blank) and a password-protected PDF has been uploaded, you will see an error message, as you can see below: In this tutorial, you have learned how to build a secure Node web application that enables users to preview password-protected PDFs in their browser. By leveraging Foxit PDF SDK, you can significantly reduce development time and effort. Foxit PDF SDK offers extensive and a wide range of examples to assist you in building various applications. documentation It’s worth noting that Foxit provides PDF SDKs not only for web applications but also for . This means you can utilize the power of Foxit PDF SDK across different environments, ensuring consistent and reliable PDF processing capabilities throughout your applications. other platforms such as mobile and native apps Also published . here

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.

A Guide to Displaying Password Protected PDFs in a Web Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Guide to Creating Custom Form Fields Using the Foxit PDF SDK for Web

$DEFI Token Hits 7 Major Exchanges: A Milestone Achievement

$JTC Network To List On BitMart Exchange

$500k Presale: TG.Casino Passes Milestone with Upcoming Telegram-Powered Platform

$3 Million in Seed Funding for Web3 Founders Announced By Necto Labs

A Guide to Creating Custom Form Fields Using the Foxit PDF SDK for Web

$DEFI Token Hits 7 Major Exchanges: A Milestone Achievement

$JTC Network To List On BitMart Exchange

$500k Presale: TG.Casino Passes Milestone with Upcoming Telegram-Powered Platform

$3 Million in Seed Funding for Web3 Founders Announced By Necto Labs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps