使用 Express.js 和 EJS 渲染 PDF 文档的方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，有时候需要将网页内容转换成 PDF 文档，以便用户可以离线阅读或打印。本文将介绍使用 Express.js 和 EJS 渲染 PDF 文档的方法，并提供示例代码。

什么是 Express.js 和 EJS？

Express.js 是一个基于 Node.js 平台的 Web 开发框架，它提供了简单、灵活的 API，使得开发 Web 应用变得更加容易。EJS 则是一种模板引擎，它可以将数据和 HTML 模板结合起来，生成最终的 HTML 页面。

渲染 PDF 文档的方法

要使用 Express.js 和 EJS 渲染 PDF 文档，需要安装一些依赖库。首先，安装 express、ejs、html-pdf 和 puppeteer：

npm install express ejs html-pdf puppeteer --save

接下来，创建一个 Express.js 应用，并设置 EJS 模板引擎：

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

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

在 views 目录下创建一个 EJS 模板文件 template.ejs，用于生成 HTML 页面。这里我们以生成一个简单的表格为例：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PDF Document</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1>PDF Document</h1>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <% for (let i = 0; i < users.length; i++) { %>
            <tr>
                <td><%= users[i].name %></td>
                <td><%= users[i].age %></td>
                <td><%= users[i].email %></td>
            </tr>
            <% } %>
        </tbody>
    </table>
</body>
</html>

在 Express.js 应用中定义一个路由，用于渲染 HTML 页面：

app.get('/pdf', (req, res) => {
    const users = [
        { name: 'Alice', age: 25, email: 'alice@example.com' },
        { name: 'Bob', age: 30, email: 'bob@example.com' },
        { name: 'Charlie', age: 35, email: 'charlie@example.com' }
    ];
    res.render('template', { users });
});

最后，在路由中使用 html-pdf 和 puppeteer 库生成 PDF 文件并发送给客户端：

// javascriptcn.com 代码示例
const pdf = require('html-pdf');
const puppeteer = require('puppeteer');

app.get('/pdf', (req, res) => {
    const users = [
        { name: 'Alice', age: 25, email: 'alice@example.com' },
        { name: 'Bob', age: 30, email: 'bob@example.com' },
        { name: 'Charlie', age: 35, email: 'charlie@example.com' }
    ];
    res.render('template', { users }, (err, html) => {
        if (err) {
            console.error(err);
            res.status(500).send('Internal Server Error');
        } else {
            (async () => {
                const browser = await puppeteer.launch();
                const page = await browser.newPage();
                await page.setContent(html);
                const pdfBuffer = await page.pdf();
                await browser.close();
                res.set('Content-Type', 'application/pdf');
                res.send(pdfBuffer);
            })();
        }
    });
});

总结

本文介绍了使用 Express.js 和 EJS 渲染 PDF 文档的方法，并提供了示例代码。通过这种方法，我们可以将网页内容转换成 PDF 文档，以便用户可以离线阅读或打印。希望本文对您有所帮助。

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