Next.js App Router中pdfmake导入失败问题求助

问题原因 #

pdfmake v0.2.x在Next.js App Router的服务端API路由中存在ES模块兼容性问题，或是服务端运行所需的依赖/配置缺失，导致路由无法正常初始化，进而返回404。

解决方案 #

1. 调整导入方式并配置转译 #

Next.js App Router默认使用ES模块，而pdfmake v0.2.x部分内部代码仍为CommonJS格式，需配置转译该包：

• 在项目根目录的next.config.js中添加转译配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['pdfmake'],
}

module.exports = nextConfig

• 修改API路由中的导入语句为CommonJS格式（配合上述转译配置使用）：

// 替换原ES导入语句
const PdfPrinter = require('pdfmake');

2. 配置服务端字体文件 #

pdfmake在服务端运行必须指定字体（客户端会自动处理，但服务端需手动配置），缺少字体配置会引发运行时错误，导致API路由失效：

• 在项目中创建字体目录（如public/fonts），放入所需字体文件（如Roboto系列ttf文件）。
• 在API路由中配置字体：

const PdfPrinter = require('pdfmake');
const fs = require('fs');
const path = require('path');

// 读取字体文件并配置
const fonts = {
  Roboto: {
    normal: fs.readFileSync(path.join(process.cwd(), 'public/fonts/Roboto-Regular.ttf'), 'base64'),
    bold: fs.readFileSync(path.join(process.cwd(), 'public/fonts/Roboto-Bold.ttf'), 'base64'),
    italics: fs.readFileSync(path.join(process.cwd(), 'public/fonts/Roboto-Italic.ttf'), 'base64'),
    bolditalics: fs.readFileSync(path.join(process.cwd(), 'public/fonts/Roboto-BoldItalic.ttf'), 'base64'),
  }
};

const printer = new PdfPrinter(fonts);

3. 排除服务端外部依赖（可选） #

若上述方法无效，可能是pdfmake依赖的Node核心模块被Next.js打包处理，需将其列为外部包：
修改next.config.js：

const nextConfig = {
  serverComponentsExternalPackages: ['pdfmake'],
}

module.exports = nextConfig

验证步骤 #

1. 重启Next.js开发服务器
2. 调用目标API路由，确认不再返回404
3. 测试pdfmake的PDF生成功能是否正常运行

内容的提问来源于stack exchange，提问作者Anand Yadav