PDF 在商业环境中被广泛使用,使其安全性成为众多工作流程的一个重要方面。在开发涉及打开 PDF 的 Web 应用程序时,您很可能会遇到受密码保护的文档。但是,从头开始实现此功能可能非常耗时,并且会产生大量维护成本,这可能与您团队当前的路线图不符。 与福昕的 ,在基于浏览器的应用程序中呈现 PDF 成为一项无缝任务。在本分步教程中,您将学习如何配置利用 Foxit PDF SDK for Web 强大功能的 Node 应用程序。通过这种集成,您可以轻松地直接在浏览器中打开受密码保护的 PDF,从而使授权用户能够预览文档。对于那些喜欢跳过教程并访问应用程序的全功能版本的人,您可以轻松找到它 。 JavaScript PDF 库 可以在 GitHub 上找到 构建 Web 应用程序来显示受密码保护的 PDF HTML 提供了方便的内置文件上传功能,使用户能够在浏览器中与本地计算机上的文件进行交互。然而,使用 JavaScript 显示 PDF 可能有点复杂,特别是在处理密码保护时。在这个综合教程中,您将构建一个包含 PDF 上传表单和可选密码字段的 Web 应用程序。上传受密码保护的 PDF 并输入正确的密码后,用户将能够无缝预览该文件。另一方面,如果提供的密码不正确,则会显示错误消息,提示用户重试。 要开发此应用程序,您将利用 用于后端开发的网络框架, 用于造型目的,以及 用于集成 PDF 功能。 表达 纯CSS 福昕 PDF SDK 先决条件 版本 8+ 和 版本 5+ NodeJS 国家公共管理 Foxit PDF SDK for Web ( ) 此处提供免费试用版下载 您的 Foxit 许可证密钥和序列号 创建新的 Express 应用程序 Express 生成器可以轻松设置新应用程序。只需在终端中运行以下命令: npx express-generator --git --view=hbs 此命令将使用 文件和 模板文件创建一个新应用程序。 .gitignore Handlebars 添加 npm 包(用于访问您的 Foxit 许可证密钥和序列号)并安装 Express 的依赖项: dotenv npm i dotenv && npm i 下载 Foxit PDF SDK for Web 后,您将在 文件中找到您的许可证密钥和序列号。接下来,在 Web 应用程序的根目录中创建一个名为 的新文件并添加两个值: examples/license-key.js .env LICENSE_SN="" LICENSE_KEY="" 将 Foxit 库复制到您的 Web 应用程序中,以便您可以从前端访问它。接下来,从您下载的 Foxit PDF SDK 中复制 目录并将其粘贴到 Web 应用程序的 目录中。现在,Foxit JavaScript PDF 库将在您的 Web 应用程序中可用。 lib/ public/ 最后,您不希望敏感信息或专有包最终进入版本控制,因此将以下内容添加到您的 文件中: .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(); ... 您的 和 会被安全存储并仅在需要时传递到前端。接下来,您将解决 Web 应用程序的显示部分。 LICENSE_SN LICENSE_KEY 上传和显示 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/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> 这将加载 样式库,但您可以使用您熟悉的任何其他前端样式框架。 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 上传表单。文件上传输入元素有一个 ,它充当样式精美的上传按钮。接下来, 标签封装了 Foxit PDF 阅读器,该阅读器在自定义 JavaScript 的 函数中使用。该文件的最后一部分加载 Foxit 的 类,并使用 标签内的代码对其进行初始化。 <label> <div id=”pdf-viewer”> pdfViewer.init 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 按钮具有一致的外观,并且还为您的应用程序添加了一些填充。 要测试您的应用程序,请首先保存您的工作,然后从终端运行 。 Node 将启动服务器,并且您的 Web 应用程序将在 上可用。 npm start 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,还为 。这意味着您可以在不同的环境中利用 Foxit PDF SDK 的强大功能,确保整个应用程序具有一致且可靠的 PDF 处理能力。 其他平台,例如移动和本机应用程序 也发布 。 在这里