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>  <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> 该文件有三个用途。首先，它包含一个带有密码字段的 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 处理能力。 其他平台，例如移动和本机应用程序 也发布 。 在这里

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.

Free Trial

Now Hiring

該音頻是用故事的原始語言製作的！

太長; 讀書

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

从论坛到信息流：社交媒体算法如何塑造数字互动

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

架构师指南：构建 AI/ML 数据湖参考架构

使用这 18 种开发工具来提高你的工作效率 🚀🔥

从论坛到信息流：社交媒体算法如何塑造数字互动

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

架构师指南：构建 AI/ML 数据湖参考架构

使用这 18 种开发工具来提高你的工作效率 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps