Jan 01, 1970
9,205 讀數
在 Web 应用程序中显示受密码保护的 PDF 的指南
太長; 讀書
开发一个 Node 应用程序，利用 Foxit PDF SDK for Web 的强大功能。这种集成使您可以轻松地直接在浏览器中打开受密码保护的 PDF。输入正确的密码后，用户将能够无缝预览文件。如果提供的密码不正确，将显示错误消息，提示用户重试。PDF 在商业环境中被广泛使用，使其安全性成为众多工作流程的一个重要方面。在开发涉及打开 PDF 的 Web 应用程序时，您很可能会遇到受密码保护的文档。但是，从头开始实现此功能可能非常耗时，并且会产生大量维护成本，这可能与您团队当前的路线图不符。
与福昕的
构建 Web 应用程序来显示受密码保护的 PDF
HTML 提供了方便的内置文件上传功能，使用户能够在浏览器中与本地计算机上的文件进行交互。然而，使用 JavaScript 显示 PDF 可能有点复杂，特别是在处理密码保护时。在这个综合教程中，您将构建一个包含 PDF 上传表单和可选密码字段的 Web 应用程序。上传受密码保护的 PDF 并输入正确的密码后，用户将能够无缝预览该文件。另一方面，如果提供的密码不正确，则会显示错误消息，提示用户重试。
要开发此应用程序，您将利用
先决条件
NodeJS 版本 8+ 和国家公共管理 版本 5+- Foxit PDF SDK for Web (
此处提供免费试用版下载 ） - 您的 Foxit 许可证密钥和序列号
创建新的 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_SN和LICENSE_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 ，如果您想知道它何时解析，请向then或catch方法添加回调。
在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，还为
也发布在这里。
L O A D I N G
. . . comments & more!
. . . comments & more!
About Author
標籤
这篇文章刊登在...
相關故事
看不见的层面：为什么用户访谈是不可替代的资产
#startup
扬帆起航：利用数据湖开发生产级 RAG 应用程序 #minio
Jan 01, 1970
如何将您的工作流程提高 10 倍：17 个必备应用程序 #web-development
Jan 01, 1970
