前端快人一步，Nodejs 教你优雅响应 PDF 文件流

2023-08-18 22:16:26

通过 Nodejs 流传输 PDF 文件：终极指南

在现代 Web 开发中，前后端分离架构已日益流行，而这带来了处理文件下载的独特挑战。本文将深入探究如何使用 Nodejs 流传输 PDF 文件，为前端 PDF 文件下载提供一个全面而有效的解决方案。

前端：发起下载请求

安装 downloadjs 库

第一步是安装 downloadjs，这是一个用于简化文件下载过程的轻量级 JavaScript 库：

npm install downloadjs

发起下载请求

安装完成后，可以使用以下示例代码发起下载 PDF 文件的请求：

import download from 'downloadjs';

axios.get('http://127.0.0.1:1919/api/getpdf', {
  headers: {
    'Content-Type': "multipart/form-data"
  }
}).then(response => {
  const blob = new Blob([response.data]);
  download(blob, 'filename.pdf');
});

后端：响应 PDF 文件流

安装必要的依赖项

在后端，需要使用 Nodejs 来响应 PDF 文件流。首先安装以下依赖项：

express（Web 框架）
multer（文件上传处理）
fs（文件系统操作）
path（文件路径处理）

定义文件上传路由

设置一个用于上传 PDF 文件的路由：

app.post('/api/uploadpdf', upload.single('file'), (req, res) => {
  // 将文件保存到服务器
  const filePath = path.join(__dirname, 'uploads', req.file.filename);
  fs.writeFileSync(filePath, req.file.buffer);

  // 返回成功信息
  res.json({ success: true });
});

定义文件下载路由

接下来，定义一个用于获取 PDF 文件的路由：

app.get('/api/getpdf', (req, res) => {
  // 获取要下载的文件路径
  const filePath = path.join(__dirname, 'uploads', 'filename.pdf');

  // 将文件读取为二进制数据
  const data = fs.readFileSync(filePath);

  // 设置响应头
  res.setHeader('Content-Type', 'application/pdf');
  res.setHeader('Content-Disposition', 'attachment; filename="filename.pdf"');

  // 发送文件数据
  res.send(data);
});