使用pdf-lib生成PDF后如何将pdfBytes保存到服务端指定/pdf目录

整体逻辑是前端将生成的PDF二进制数据上传到服务端接口，服务端接收后写入指定的/pdf目录，分前后端两部分修改：

1. 前端代码修改 #

把原来触发下载的逻辑替换为上传请求，修改createPdf函数里pdfBytes生成后的代码即可：

// 原来的download代码注释或删除
// download(pdfBytes, "pdf-lib_creation_example.pdf", "application/pdf");

// 新增上传逻辑
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const formData = new FormData();
// 自定义文件名，可根据业务需求调整，比如加唯一标识避免重名
const fileName = `pdf_${Date.now()}.pdf`;
formData.append('pdfFile', blob, fileName);

try {
  const res = await fetch('https://你的服务端地址/upload-pdf', {
    method: 'POST',
    body: formData
  });
  if (res.ok) {
    alert('PDF已保存到服务端');
  } else {
    alert('上传失败');
  }
} catch (err) {
  console.error('上传出错:', err);
}

2. 服务端实现（以Node.js + Express为例） #

2.1 先安装依赖 #

npm install express multer cors

• multer用于处理formData格式的文件上传
• cors用于解决前端跨域请求问题

2.2 服务端代码示例 #

const express = require('express');
const multer = require('multer');
const cors = require('cors');
const fs = require('fs');
const path = require('path');

const app = express();
app.use(cors());

// 确认/pdf目录存在，不存在则创建
const uploadDir = path.join(__dirname, 'pdf');
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

// 配置multer存储规则
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, uploadDir); // 存储到指定的/pdf目录
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname); // 用前端传的文件名保存
  }
});
const upload = multer({ storage: storage });

// 上传接口
app.post('/upload-pdf', upload.single('pdfFile'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('未接收到PDF文件');
  }
  res.status(200).send('PDF保存成功');
});

// 启动服务
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`服务运行在端口${PORT}`);
});

注意事项 #

• 服务端的/pdf目录需要开启写入权限，避免写入失败
• 生产环境建议对上传的文件做校验，比如确认文件类型确实是PDF、限制文件大小，避免恶意上传
• 文件名建议增加唯一标识（比如UUID、时间戳），避免同名文件覆盖

内容的提问来源于stack exchange，提问作者Moshe Assayag