如何使用 Express.js 实现一个在线 PDF 阅读器-JavaScript中文网-JavaScript教程资源分享门户

本文将带领大家使用 Express.js 和相关的库实现一个在线 PDF 阅读器。我们将使用 PDF.js 这个来自 Mozilla 的开源库来渲染 PDF 文件。本文既适合对前端和后端深入了解的开发者，也适合对后端开发稍有了解的新手。

步骤 1：安装初始化项目

首先，我们需要创建一个文件夹，命名为“express-pdf-reader”。然后，通过命令行进入这个文件夹。

接下来，我们需要安装 Node.js 和 npm。你可以通过访问 https://nodejs.org/ 了解安装细节。

接着，我们可以通过执行以下命令来初始化项目：

npm init -y

这个命令将创建一个空的 package.json 文件。

步骤 2：安装和设置 Express.js

接下来，让我们将 Express.js 库安装到我们的项目中：

npm install express

然后，在我们的项目根目录下创建一个新文件，命名为“index.js”。这个文件将作为我们启动这个项目的入口文件。在这个文件中，我们需要编写以下代码：

const express = require('express')
const app = express()

const PORT = process.env.PORT || 3000 // 确保 PORT 变量被正确获取

app.listen(PORT, () => console.log(`Server started on port ${PORT}`))

这段代码会启动一个 Express.js 服务器，监听我们设置的端口号。

步骤 3：安装和设置 PDF.js

引入 PDF.js 库有两种方法，你可以将 PDF.js 的源代码下载下来，或者引入官方提供的 CDN。我们将使用后者。在 index.js 文件中引入以下代码：

const pdfjsLib = require('pdfjs-dist/webpack')

pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js'

这段代码将会设置 PDF.js 工作线程的路径。这个路径指向了 CloudFlare 提供的 CDN 地址。如果你有自己的服务器，可以在服务器上下载 PDF.js 并引入。

步骤 4：编写路由和视图

现在，我们需要设置视图和路由来打开 PDF 文件。

首先，我们需要在项目根目录下创建一个“views”文件夹。在这个文件夹下创建一个名为“index.ejs”的文件，这个文件将会作为我们的 PDF 阅读器的主页。

在 index.ejs 文件中，我们可以写下以下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Express PDF Reader</title>
  </head>
  <body>
    <form method="POST" action="/pdf">
      <input type="text" name="pdf" placeholder="输入 PDF 文件的 URL">
      <button type="submit">阅读</button>
    </form>
  </body>
</html>

这段代码创建了一个简单的表单，让用户输入 PDF 文件的 URL，并提交表单。提交表单后，我们将使用 Express.js 路由来打开一个 PDF 阅读器。

然后，我们需要在我们的 index.js 文件中编写路由。在这个文件中，添加以下代码：

app.set('view engine', 'ejs')

app.get('/', (req, res) => {
  res.render('index')
})

app.use('/pdf', require('./routes/pdf.js'))

这段代码中，“app.set('view engine', 'ejs')”将设置我们的模板引擎为 EJS。然后，我们定义了首页路由，和“/pdf”路由。路由和对应视图文件之间的关系将在后面的步骤中进行定义。

现在，让我们在项目根目录下创建一个名为“routes”的文件夹，然后在文件夹中创建一个名为“pdf.js”的文件。该文件将作为我们的 PDF 阅读器路由的处理程序。

在“pdf.js”文件中，我们将编写以下代码：

// javascriptcn.com 代码示例
const router = require('express').Router()
const http = require('http')
const https = require('https')
const querystring = require('querystring')
const pdfjsLib = require('pdfjs-dist/webpack')

router.post('/', (req, res) => {
  const pdfUrl = req.body.pdf

  if (!pdfUrl) {
    return res.redirect('/')
  }

  const parsedPdfUrl = new URL(pdfUrl)

  const httpHandler = parsedPdfUrl.protocol === 'https:' ? https : http
  const options = {
    method: 'GET',
    hostname: parsedPdfUrl.hostname,
    path: parsedPdfUrl.pathname
  }

  const pdfRequest = httpHandler.request(options, (pdfResponse) => {
    const chunks = []

    pdfResponse.on('data', (chunk) => {
      chunks.push(chunk)
    })

    pdfResponse.on('end', () => {
      const pdfData = Buffer.concat(chunks)

      pdfjsLib.getDocument({ data: pdfData }).promise.then((pdf) => {
        const pages = []

        for (let i = 1; i <= pdf.numPages; i++) {
          pages.push(i)
        }

        res.render('pdf', { pdfUrl, pages })
      })
    })
  })

  pdfRequest.on('error', () => {
    res.redirect('/')
  })

  pdfRequest.end()
})

module.exports = router

这段代码首先定义了一个路由，处理 PDF 文件的请求，获取 PDF 数据并传递给 PDF.js 进行处理，最后将 PDF 数据作为视图的数据传递给 PDF 阅读器视图。

步骤 5：编写 PDF 阅读器视图

最后，我们需要编写 PDF 阅读器视图。我们将在“views”文件夹下创建一个名为“pdf.ejs”的文件。在这个文件中，我们将创建一个可以查看所有 PDF 页面的视图。

如下代码为 PDF.js 自己的对样式的定义, 常言道，样式是一门艺术，懂得美感的程序员也是好的。

// javascriptcn.com 代码示例
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .pdf-viewer {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .pdf-viewer .pdf-toolbar {
    display: flex;
    justify-content: space-around;
    padding: 16px;
  }
  
  .pdf-viewer .pdf-toolbar button {
    padding: 8px;
    border: none;
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
  }

  .pdf-viewer .pdf-pages {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: auto;
    align-items: center;
  }

  .pdf-viewer .pdf-page {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px;
  }

  .pdf-viewer .pdf-page canvas {
    max-width: 100%;
    overflow-x: auto;
  }
</style>

然后，我们将在“pdf.ejs”中编写以下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Express PDF Reader</title>
  </head>
  <body>
    <div class="pdf-viewer">
      <div class="pdf-toolbar">
        <button onclick="prevPage()">上一页</button>
        <button onclick="nextPage()">下一页</button>
      </div>
      <div class="pdf-pages">
        <% pages.forEach((page) => { %>
          <div class="pdf-page">
            <canvas id="pdf-page-<%= page %>"></canvas>
          </div>
        <% }) %>
      </div>
    </div>
    <script>
      let currentPage = 1
      const totalPages = <%= pages.length %>
      const pdfUrl = '<%= pdfUrl %>'

      const canvasCache = []

      function renderPage(page) {
        if (canvasCache[page]) {
          return canvasCache[page]
        }

        const canvas = document.getElementById(`pdf-page-${page}`)
        const ctx = canvas.getContext('2d')

        pdf.getPage(page).then((pdfPage) => {
          const viewport = pdfPage.getViewport({ scale: 1 })
          const scale = canvas.offsetWidth / viewport.width
          const viewportScaled = pdfPage.getViewport({ scale })

          canvas.width = viewportScaled.width
          canvas.height = viewportScaled.height

          const renderContext = {
            canvasContext: ctx,
            viewport: viewportScaled
          }

          pdfPage.render(renderContext)

          canvasCache[page] = canvas
        })
      }

      function renderCurrentPage() {
        renderPage(currentPage)
      }

      function nextPage() {
        if (currentPage < totalPages) {
          currentPage++
          renderCurrentPage()
        }
      }

      function prevPage() {
        if (currentPage > 1) {
          currentPage--
          renderCurrentPage()
        }
      }

      let pdf = null
      pdfjsLib.getDocument({ url: pdfUrl }).promise.then((pdfDoc) => {
        pdf = pdfDoc
        renderCurrentPage()
      })
    </script>
  </body>
</html>

这个视图将展示每个 PDF 页面的 canvas 。我们将使用 PDF.js 中的“pdf.getPage”方法来渲染 PDF 页面，并且将已经渲染的页面缓存到“canvasCache”中，这样可以提高 PDF 页面的加载速度。

步骤 6：运行项目并测试

这就是我们的 Express.js PDF 阅读器的全部内容。现在，我们需要通过命令行将项目启动：

node index.js

运行成功后，打开浏览器并访问 http://localhost:3000/ ，即可完成 PDF 阅读器的搭建，你可以添加你自己的 PDF 文件 Url 进行在线预览测试。

总结

在这篇文章中，我们了解了如何使用 Express.js 和 PDF.js 来实现一个在线 PDF 阅读器。我们通过编写路由、视图和一些 JavaScript 代码来实现了这个功能。我们也通过这个项目了解了如何使用 Node.js 中的一些基本概念和库。

本文详细地描述了如何实现这个项目，包括所有的安装和配置步骤，以及所有路由、视图和 JavaScript 代码的编写细节。即使是没有深入了解过这些知识的人也能通过本文轻松地了解这个项目的细节，从而为前端开发提供帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6528da5b7d4982a6ebb673e4