65.9K
CodeProject 正在变化。 阅读更多。
Home

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

Karl_Hughes
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2021 年 11 月 12 日

CPOL

6分钟阅读

viewsIcon

10054

在本教程中，我们将构建一个 Node.js Web 应用程序，允许用户安全地在浏览器中预览受密码保护的 PDF。

PDF 是最广泛使用的商业文档格式之一，因此妥善保护它们是许多工作流程的关键部分。如果您正在构建需要打开 PDF 的 Web 应用程序，您很可能会遇到必须处理受密码保护的文档的情况。自己构建此功能将需要大量时间和维护成本，而这些成本可能不在您团队的路线图中。

Foxit 的 PDF SDK for Web 可以轻松地在基于浏览器的应用程序中显示 PDF。在本教程中，您将设置一个 Node.js 应用程序，该应用程序使用 Foxit SDK 在浏览器中打开受密码保护的 PDF，并允许授权用户预览文档。此应用程序也可在 GitHub 上获取，如果您想直接跳转到工作版本。

访问 Foxit PDF SDK Web 演示，通过探索配置和功能来亲眼看看.

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

HTML 带有内置的文件上传功能，允许用户在浏览器中使用本地计算机上的文件。不幸的是，在 JavaScript 中显示 PDF 要复杂一些，尤其是当您需要支持密码保护时。在本教程中，您将构建一个具有 PDF 上传表单和可选密码字段的 Web 应用程序。当上传受密码保护的 PDF 并输入正确的密码时，用户将看到文件的预览。如果输入了错误的密码，他们将看到一条错误消息，并被指示重试。

您将使用 Express Web 框架，Pure CSS 进行样式设计，以及 Foxit 的 PDF SDK 来构建此应用程序。

必备组件

创建新的 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="<YOUR FOXIT SERIAL NUMBER>"
LICENSE_KEY="<YOUR FOXIT LICENSE KEY>"

接下来，将 Foxit 库复制到您的 Web 应用程序中，以便您可以从前端访问它。从您下载的 Foxit PDF SDK 中复制 lib/ 目录，并将其粘贴到您的 Web 应用程序的 public/ 目录中。现在，Foxit JavaScript 库将在您的 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;

这使您无需更改代码即可在服务器上轻松更新凭据，而无需硬编码。它还意味着如果您在此应用程序中添加了身份验证层，您可以限制哪些用户可以看到 Foxit 凭据。

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

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

您的 LICENSE_SN 和 LICENSE_KEY 已安全存储，并且仅在需要时才传递到前端。在下一步中，您将处理 Web 应用程序的显示部分。

在浏览器中尝试我们的 SDK Web 演示，无需下载或登录.

上传和显示 PDF

Foxit SDK 将处理大部分检查密码并将 PDF 显示给用户的操作，但您需要实现文件和密码输入的 UI。在此之前，您还需要更新布局以包含一些基本样式并缩放 viewport。这确保 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" crossorigin="anonymous">
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div class="container">
  {{{body}}}
</div>
</body>
</html>

这会加载 PureCSS 样式库，但您可以使用任何您熟悉的 CSS 框架。

接下来，打开 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.js Web 应用程序，该应用程序允许用户安全地在浏览器中预览受密码保护的 PDF。使用 Foxit PDF SDK 将为您节省无数的开发时间，并且他们的工具在 文档 中提供了各种其他示例。虽然本教程侧重于构建 Web 应用程序，但 Foxit 为多个平台提供了 SDK，包括移动和原生应用程序。

在您选择的平台上尝试 Foxit PDF SDK 的先进技术：Web、Windows、Android、iOS、Linux、UWP 或 Mac。立即注册 免费三十天试用。

© . All rights reserved.