如何使用 Express.js 实现 PDF 文件生成和下载

前言

在前端开发中，经常需要将数据以 PDF 格式的文件进行保存和分享。本文将介绍如何使用 Express.js 库快速地生成并下载 PDF 文件。

准备工作

在开始正式代码编写之前，需要安装以下几个模块：

• express：一个处理 HTTP 请求的库。
• pdfmake：一个快速生成 PDF 文件的库。

运行以下命令进行安装：

npm install express pdfmake

编写代码

在创建 Express 应用的主文件 app.js 中，我们首先需要引入依赖的模块：

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

接下来需要配置 pdfmake，注意：在此期间需要进行中英文的映射。

const printer = new pdfmake({
    font: {
        Roboto: {
            normal: 'fonts/Roboto-Regular.ttf',
            bold: 'fonts/Roboto-Medium.ttf',
            italics: 'fonts/Roboto-Italic.ttf',
            bolditalics: 'fonts/Roboto-MediumItalic.ttf'
        }
    }, 
    lang: 'zh-cn'
});

其中 font 属性用于设置字体，需要首先在项目中准备好字体文件，放置在 fonts 目录下，这里使用了 Roboto 字体。lang 属性用于指定语言为中文。

接下来，我们使用 express.Router() 创建一个路由器实例，并在其中编写生成 PDF 文件的代码。

const router = express.Router();

router.post('/generate-pdf', (req, res) => {
    const docDefinition = {
        content: [
            { text: '这是一份测试 PDF 文件', fontSize: 25, bold: true, alignment: 'center', margin: [0, 0, 0, 20] },
            { text: 'PDF 文件生成时间：' + new Date().toLocaleString() },
            { text: 'PDF 文件生成用户：' + req.body.username },
        ],
    };

    const pdfDoc = printer.createPdfKitDocument(docDefinition);
    res.setHeader('Content-Type', 'application/pdf');
    pdfDoc.pipe(res);
    pdfDoc.end();
});

module.exports = router;

这里我们定义了一个 POST 请求 /generate-pdf，其中形参 req.body.username 表示用户名，用于在 PDF 文件中展示。docDefinition 对象表示 PDF 文件的内容，包含了标题和相关信息。res.setHeader('Content-Type', 'application/pdf'); 表示返回的文件类型为 PDF 格式，使用 res 对象将 PDF 文件返回给前端。

客户端代码

在 HTML 页面中设置一个表单，填写用户信息并点击按钮生成 PDF 文件。代码如下：

<form id="generate-pdf-form" method="post" action="/api/generate-pdf">
    <input type="text" name="username" placeholder="请输入用户名">
    <button type="submit">生成 PDF 文件</button>
</form>

<script>
document.getElementById('generate-pdf-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const form = e.target;
    const xhr = new XMLHttpRequest();
    xhr.open('POST', form.action, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.responseType = 'blob';
    xhr.onload = function() {
        var url = window.URL.createObjectURL(new Blob([this.response], { type: 'application/pdf' }));
        const a = document.createElement('a');
        a.href = url;
        a.download = 'test.pdf';
        document.body.appendChild(a);
        a.click();
        a.remove();
    };
    xhr.send(JSON.stringify({
        username: form.username.value,
    }));
});
</script>

这里使用了 XHR 对象进行 POST 请求，并将请求的数据格式设置为 JSON 格式。在返回的 PDF 文件中，我们使用 Blob 对象将其转化为二进制数据类型，并将其通过创建一个 <a> 元素的 URL 属性使其可以被浏览器下载保存。

总结

使用 Express.js 和 pdfmake 库，可以快速地生成并下载 PDF 格式的文件，实现了数据的可视化和分享。本篇文章详细介绍了如何使用 PDFmake 库生成 PDF 文件并通过 Express.js 进行传输，同时也展示了如何在客户端进行下载。通过学习这些内容，希望读者可以在实际项目中实现 PDF 文件的生成和分享。

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