PDF 在商业环境中被广泛使用,使其安全性成为众多工作流程的一个重要方面。在开发涉及打开 PDF 的 Web 应用程序时,您很可能会遇到受密码保护的文档。但是,从头开始实现此功能可能非常耗时,并且会产生大量维护成本,这可能与您团队当前的路线图不符。
与福昕的
HTML 提供了方便的内置文件上传功能,使用户能够在浏览器中与本地计算机上的文件进行交互。然而,使用 JavaScript 显示 PDF 可能有点复杂,特别是在处理密码保护时。在这个综合教程中,您将构建一个包含 PDF 上传表单和可选密码字段的 Web 应用程序。上传受密码保护的 PDF 并输入正确的密码后,用户将能够无缝预览该文件。另一方面,如果提供的密码不正确,则会显示错误消息,提示用户重试。
要开发此应用程序,您将利用
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 应用程序的显示部分。
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,还为
也发布在这里。