pdfmake技术问题:无法在VFS中找到字体文件
我之前也碰到过一模一样的问题!pdfmake的字体加载坑确实容易踩,给你几个排查和解决的方向:
1. 确认vfs_fonts的引入顺序
这是最容易忽略的点:vfs_fonts.js必须在pdfmake核心文件之前引入,否则pdfmake无法识别vfs里打包的字体资源。正确的引入顺序应该是:
<script src="./vfs_fonts.js"></script> <script src="./pdfmake.min.js"></script>
如果顺序搞反了,就算vfs里包含字体,pdfmake也会直接去本地文件系统找,自然会抛出ENOENT错误。
2. 检查vfs_fonts.js是否包含目标字体
打开你的vfs_fonts.js文件,搜索Roboto-Medium.ttf,看看有没有对应的base64编码内容。如果搜不到,说明你用的vfs文件是不完整的——需要重新生成包含目标字体的vfs文件:
用pdfmake提供的build-vfs.js工具,把你的字体目录打包进去,命令示例:
node build-vfs.js "./your-fonts-directory-path"
执行后会生成新的vfs_fonts.js,里面就会包含你指定目录下的所有字体文件。
3. 手动配置字体路径(备选方案)
如果依赖vfs自动加载还是不行,可以手动给pdfmake指定字体的具体路径,绕过vfs的自动机制:
pdfmake.fonts = { Roboto: { normal: './fonts/Roboto-Regular.ttf', bold: './fonts/Roboto-Bold.ttf', medium: './fonts/Roboto-Medium.ttf', // 这里要确保路径和实际文件位置一致 italics: './fonts/Roboto-Italic.ttf', bolditalics: './fonts/Roboto-BoldItalic.ttf' } };
注意这里的路径是相对于你的项目入口文件(Node环境)或HTML文件(浏览器环境)的相对/绝对路径,别写错层级。
4. Node.js环境下的额外配置
如果是在Node环境中使用pdfmake,除了引入vfs文件,还需要手动将vfs对象挂载到pdfmake上:
const pdfmake = require('pdfmake'); const vfs = require('./vfs_fonts.js'); // 手动挂载vfs资源 pdfmake.vfs = vfs;
这样pdfmake才能正确读取vfs里的字体资源,而不是去本地文件系统查找。
错误原因说明
你遇到的ENOENT: no such file or directory错误,本质是pdfmake没有从vfs中读取到字体资源,转而尝试从本地文件系统加载,但找不到对应的字体文件。核心问题要么是vfs加载顺序错了,要么是vfs里没有包含目标字体,要么是路径配置有误。
内容的提问来源于stack exchange,提问作者user1247395




