paint-brush
在 Web 应用程序中显示受密码保护的 PDF 的指南经过@foxitsoftware
9,162 讀數
9,162 讀數

在 Web 应用程序中显示受密码保护的 PDF 的指南

经过 Foxit Software8m2023/07/06
Read on Terminal Reader

太長; 讀書

开发一个 Node 应用程序,利用 Foxit PDF SDK for Web 的强大功能。这种集成使您可以轻松地直接在浏览器中打开受密码保护的 PDF。输入正确的密码后,用户将能够无缝预览文件。如果提供的密码不正确,将显示错误消息,提示用户重试。
featured image - 在 Web 应用程序中显示受密码保护的 PDF 的指南
Foxit Software HackerNoon profile picture
0-item
1-item

PDF 在商业环境中被广泛使用,使其安全性成为众多工作流程的一个重要方面。在开发涉及打开 PDF 的 Web 应用程序时,您很可能会遇到受密码保护的文档。但是,从头开始实现此功能可能非常耗时,并且会产生大量维护成本,这可能与您团队当前的路线图不符。


与福昕的JavaScript PDF 库,在基于浏览器的应用程序中呈现 PDF 成为一项无缝任务。在本分步教程中,您将学习如何配置利用 Foxit PDF SDK for Web 强大功能的 Node 应用程序。通过这种集成,您可以轻松地直接在浏览器中打开受密码保护的 PDF,从而使授权用户能够预览文档。对于那些喜欢跳过教程并访问应用程序的全功能版本的人,您可以轻松找到它可以在 GitHub 上找到

构建 Web 应用程序来显示受密码保护的 PDF

HTML 提供了方便的内置文件上传功能,使用户能够在浏览器中与本地计算机上的文件进行交互。然而,使用 JavaScript 显示 PDF 可能有点复杂,特别是在处理密码保护时。在这个综合教程中,您将构建一个包含 PDF 上传表单和可选密码字段的 Web 应用程序。上传受密码保护的 PDF 并输入正确的密码后,用户将能够无缝预览该文件。另一方面,如果提供的密码不正确,则会显示错误消息,提示用户重试。


要开发此应用程序,您将利用表达用于后端开发的网络框架,纯CSS用于造型目的,以及福昕 PDF SDK用于集成 PDF 功能。

先决条件

创建新的 Express 应用程序

Express 生成器可以轻松设置新应用程序。只需在终端中运行以下命令:


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


此命令将使用.gitignore文件和Handlebars模板文件创建一个新应用程序。

添加dotenv npm 包(用于访问您的 Foxit 许可证密钥和序列号)并安装 Express 的依赖项:


 npm i dotenv && npm i


下载 Foxit PDF SDK for Web 后,您将在examples/license-key.js文件中找到您的许可证密钥和序列号。接下来,在 Web 应用程序的根目录中创建一个名为.env的新文件并添加两个值:


 LICENSE_SN="" LICENSE_KEY=""


将 Foxit 库复制到您的 Web 应用程序中,以便您可以从前端访问它。接下来,从您下载的 Foxit PDF SDK 中复制lib/目录并将其粘贴到 Web 应用程序的public/目录中。现在,Foxit JavaScript PDF 库将在您的 Web 应用程序中可用。


最后,您不希望敏感信息或专有包最终进入版本控制,因此将以下内容添加到您的.gitignore文件中:


 ... public/lib/ .env


一旦您的Web应用程序具备了所有必要的依赖项,您就可以继续创建负责使用Foxit显示PDF预览的路由。

设置路线

Express 应用程序中的每个页面都有一个路径,包括您将在本演示中创建的 PDF 上传页面。更新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;


允许您轻松更新服务器上的凭据,而无需需要更改代码的硬编码凭据。通过向 Express 应用程序添加身份验证层,您可以控制对 Foxit 凭证的访问并限制授权用户的可见性。


process.env变量可用之前,您需要包含dotenv库,该库从.env文件加载变量。打开app.js并将以下内容添加到文件顶部:


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


您的LICENSE_SNLICENSE_KEY会被安全存储并仅在需要时传递到前端。接下来,您将解决 Web 应用程序的显示部分。

上传和显示 PDF


Foxit 的 PDF SDK 将处理检查密码并向用户显示 PDF 所涉及的大部分工作,但您需要管理文件和密码输入的用户界面。在此之前,您需要更新布局,使其包含基本样式,然后您可以缩放“视口”。这将导致 PDF 预览的大小适合用户的显示器。


打开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/[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>


这将加载PureCSS样式库,但您可以使用您熟悉的任何其他前端样式框架。


打开views/index.hbs文件并将其替换为以下内容:


 <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>


该文件有三个用途。首先,它包含一个带有密码字段的 PDF 上传表单。文件上传输入元素有一个<label> ,它充当样式精美的上传按钮。接下来, <div id=”pdf-viewer”>标签封装了 Foxit PDF 阅读器,该阅读器在自定义 JavaScript 的pdfViewer.init函数中使用。该文件的最后一部分加载 Foxit 的PDFViewCtrl.PDFViewer类,并使用<script>标签内的代码对其进行初始化。


该应用程序的功能已接近完成,但在测试之前,请打开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; }


允许您设置 PDF 上传按钮的样式,使其与其他 PureCSS 按钮具有一致的外观,并且还为您的应用程序添加了一些填充。


要测试您的应用程序,请首先保存您的工作,然后从终端运行npm start 。 Node 将启动服务器,并且您的 Web 应用程序将在localhost:3000上可用。



为了处理用户在上传受密码保护的 PDF 文件时输入错误密码的情况,您可以增强现有代码以显示错误消息并允许用户重试。以下是实现此功能的方法:

处理错误

Foxit 的pdfViewer.openPDFByFile方法返回一个Promise ,如果您想知道它何时解析,请向thencatch方法添加回调。


views/index.hbs文件中,将pdfViewer.openPDFByFile…行替换为以下内容:


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


在文件顶部添加一个名为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> ...


最后,您需要添加一些样式,以便仅在调用catch方法后显示错误消息。在public/stylesheets/style.css文件中,添加以下内容:


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


如果您输入的密码不正确(或将密码字段留空)并且已上传受密码保护的 PDF,您将看到一条错误消息,如下所示:


在本教程中,您学习了如何构建安全的 Node Web 应用程序,使用户能够在浏览器中预览受密码保护的 PDF。通过利用 Foxit PDF SDK,您可以显着减少开发时间和工作量。 Foxit PDF SDK提供了广泛的文档以及大量示例来帮助您构建各种应用程序。


值得注意的是,Foxit 不仅为 Web 应用程序提供 PDF SDK,还为其他平台,例如移动和本机应用程序。这意味着您可以在不同的环境中利用 Foxit PDF SDK 的强大功能,确保整个应用程序具有一致且可靠的 PDF 处理能力。


也发布在这里