You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

pdfmake技术问题:无法在VFS中找到字体文件

我之前也碰到过一模一样的问题!pdfmake的字体加载坑确实容易踩,给你几个排查和解决的方向:

解决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

火山引擎 最新活动